Vue初学者
1.首先了解一下什么是Vue
Vue是构建Web界面的JavaScript库，原称为Vue.js，它可以通过简洁的API来
提供高效的数据绑定和灵活的组件系统。它提供了现代Web开发中常用的高级
功能
Vue最开始可以使用导入js文件的方式进行使用，也可以使用Vue脚手架等进行快速开发
2.初始Vue
（1）Vue的双向数据绑定（v-model）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js" charset="utf-8" type="text/javascript"></script>
<script src="../js/Jquery.js" charset="utf-8" type="text/javascript"></script>
<script>
$(function(){
var vm = new Vue({
el:"#app",
data:{
message:"我是你爸爸"
}
})
})
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
</body>
</html>
（2）Vue 的声明周期
- 创建Vue
var vm=new Vue({
// 选项参数
}); - 常用选项参数：el，确定vue的空间
- data：数据
- methods：Vue实例的方法集合
- filters：包含Vue实例可用的过滤器的哈希表
Vue钩子函数
- created()函数：实例建立完成后调用
- mounted()函数：el挂载到实例上后调用
- beforeDestroy()函数：实例销毁之前调用
过滤器
器名",function(val){
过滤语句
});
//创建局部过滤器
var vm = new Vue({
el: "#app",
filters:{
过滤器名:function(val){
过滤语句
}}
});
创建完过滤器后再使用过滤器时使用 | 进行过滤
## 2.Vue基本指令
- {{}}用于文本插值
- 当只需要渲染一次的时候使用 v-once指令
- v-text可以用来代替大括号标签
- 再vue中，可以使用三元表达式{{ok?‘yes’:‘no’}}
- <a v-bind:href=“url”>href是参数，告知vbind指令将该元素的href属性与表达式url的值绑定。
- <a v-on:click=“doSomething”>在这里参数是监听的事件名
扫一扫
7757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
