因为后端需要懂一些前端的知识，所以记录一下vue的一些入门用法，以备复习
Vue入门
1、什么是vue.js
Vue是目前很火的一个前端框架，用于构陷用户界面的框架，只关注图层
2、MVVN
Vue使用MVVM框架，将前端的视图层分为三部分Model、View、ViewModel
MVVM的核心是ViewModel层，它就像是一个中转站（value converter），扶着转换Model中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与Model层通过接口请求进行数据交互，起承上启下作用。
3、Vue基本语法
3.1、v-text：
设置标签的文本内容，将原来的文本内容全部替换掉，{{}}:相当于一个占位符
<body>
<div id="app">
<!-- {{}}： 插值表示式 -->
<h2>-------{{msg}}</h2>
<!-- 设置标签的文本内容 -->
<h2 v-text="msg">啊啊啊啊啊</h2>
</div>
<script type="text/jscript">
// 创建vue的实例对象q
var vue = new Vue({
el:"#app",//el:指定vue语法的区域
data:{ //设置元素中需要使用的数据
msg:"hello vue"
}
})
</script>
</body>
3.2、v-bing
用于绑定属性的指令，不能实现双向绑定。
<body>
<div id="app">
<h2 v-bind:title="tips">单向绑定on</h2>
<!--
注：在页面修改此input框内的内容时，不会影响inputvalue的值，
v-bind是单向绑定
-->
<input type="text" v-bind:value="inputvalue" />
<!-- v-bind 可以写为：value 来实现单向绑定 -->
<input type="text" :value="inputvalue" />
</div>
<script type="text/jscript">
// 创建vue的实例对象q
var vue = new Vue({
el:"#app",//el:指定vue语法的区域
data:{ //设置元素中需要使用的数据
msg:"hello vue",
tips:"这是绑定的提示信息",
inputvalue:"这里绑定input的内容",
value
}
})
</script>
</body>
3.3、v-on
事件绑定机制，可以简写为@事件
事件中触发的函数，在vue实例中的methods中进行定义，可以按照两种方式进行定义
<body>
<div id="app">
<!-- 绑定事件，触发事件后，指定的函数来自vue对象 -->
<button v-on:click="btnclick()">click</button>
<button @click="btnclick()">v-on的简写</button>
</div>
<script type="text/jscript">
// 创建vue的实例对象
var vue = new Vue({
el:"#app",//el:指定vue语法的区域
data:{ //设置元素中需要使用的数据
msg:"hello vue"
},
methods:{//定义方法
btnclick:function(){
alert("123")
}
}
})
</script>
</body>
使用v-on的一个获取时间暂停小例子
<body>
<div id="app">
<!-- 绑定事件，触发事件后，指定的函数来自vue对象 -->
<button v-on:click="btnclick()">click</button>
<button @click="btnclick()">v-on的简写</button>
<button @click="start">start</button>
<button @click="stop">stop</button>
<h2>{{timeStr}}</h2>
</div>
<script type="text/jscript">
var timeInter
window.clearIn
// 创建vue的实例对象
var vue = new Vue({
el:"#app",//el:指定vue语法的区域
data:{ //设置元素中需要使用的数据
timeStr:"",
timeInterval:null
},
methods:{//定义方法
btnclick:function(){
alert("123")
},
start:function(){
console.log(this);//表示vue对象,所以定义一个变量提供给timeStr
var _this = this;
this.timeInterval = setInterval(function(){
//console.log(this);//表示window对象
var date = new Date();
_this.timeStr = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
},1000)
},
stop(){//vue中可以不用写function,直接定义函数名
clearInterval(this.timeInterval);
}
}
})
</script>
</body>
3.4、v-model
可以实现表单元素和数据的双向数据绑定
双向绑定：表单的value值随着绑定的内容改变而改变
表单的value值改变时，绑定的内容也随之改变
注意：针对表单元素
例子：加法运算处理
<body>
<div id="app">
<h2>{{info}}</h2>
<!-- v-model:针对表单元素，实现数据的双向绑定 -->
<input v-model="info" />
</div>
<script type="text/jscript">
// 创建vue的实例对象
var vue = new Vue({
el:"#app",//el:指定vue语法的区域
data:{ //设置元素中需要使用的数据
info:"haha"
}
</script>
</body>
v-model两个input框内数字相加小例子
<body>
<div id="app">
<h2>{{info}}</h2>
<!-- v-model:针对表单元素，实现数据的双向绑定 -->
<input v-model="info" /></br>
<input type="text" v-model="v1"/>+<input type="text" v-model="v2" />=<span>{{vsum}}</span>
<button @click="add">add</button>
</div>
<script type="text/jscript">
// 创建vue的实例对象
var vue = new Vue({
el:"#app",//el:指定vue语法的区域
data:{ //设置元素中需要使用的数据
info:"haha",
v1:null,
v2:null,
vsum:""
},
methods:{//定义方法
btnclick:function(){
alert("123")
},
add(){
// 判断是否不是数字
if(isNaN(this.v1) || isNaN(this.v2)){
alert("输入数据不是数字");
this.v1="";
this.v2=";"
return;
}
this.vsum = parseInt(this.v1)+parseInt(this.v2);
}
}
})
</script>
</body>
3.5、v-if
条件判断指令，还有v-else
haha
heihei
类似的，还有v-show
v-if：每次都会重新删除或创建元素
v-show：只是设置了元素的 display:none样式
3.6、v-for
循环指令
遍历普通数据
- {{item}}
-
遍历列表中对象数据
- {{item.id}}-{{item.name}}
-
遍历对象数据
- {{k}}-{{v}}
-
例子：向表格中动态添加数据
<body> <div id="app"> <ul> <!-- 遍历数组 --> <li v-for="item in arr">{{item}}</li> </ul> <ul> <!-- 获取遍历的元素和对应的索引 --> <li v-for="(item,index) in arr">{{item}}--{{index}}</li> </ul> <ul> <!-- 遍历对象中的属性，vue中key和value相对于后端是反的 v:value k:key 注：(v,k) in obj 中间一定要加空格。 --> <li v-for="(v,k) in obj">{{k}}--{{v}}</li> </ul> <table border="1" width="200"> <tr v-for="(item,index) in ulist"> <td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </table> <button @click="addUser()">添加用户</button> </div> <script type="text/jscript"> // 创建vue的实例对象 var vue = new Vue({ el:"#app",//el:指定vue语法的区域 data:{ //设置元素中需要使用的数据 arr:[1 , 23 , 12], obj:{name:"zhangsan" , age:20}, ulist:[{name:"zhangsan" , age:20} , {name:"wangwu" , age:10} , {name:"小雨" , age:6}] }, methods:{//定义方法 addUser(){ this.ulist.push({name:"小虎",age:30}); } } }) </script> </body>4、事件修饰符
.stop 阻止冒泡
.prevent 阻止默认行为
.capture 实现捕获触发事件的机制
.self 实现只有点击当前元素时候，才会触发事件处理函数，另外只会阻止自己身上冒泡行为的触发
.once 只触发一次事件处理函数
<body> <div id="app"> <!-- 使用return false 来阻止a连接跳转--> <a href="http://www.baidu.com" onclick="alert(1);return false;" >click</a> <!-- 使用事件修饰符 .pervent阻止默认行为来阻止a链接跳转 --> <a href="http://www.baidu.com" onclick="alert(1); event.prevent()" >pervent阻止默认行为</a> <!-- vue 阻止默认行为--> <a href="http://www.baidu.com" @click.prevent="btnclick">pervent阻止默认行为（vue）</a> <!-- vue阻止默认行为，只触发一次 --> <a href="http://www.baidu.com" @click.prevent.once="btnclick">vue阻止默认行为，只触发一次</a> </div> <script type="text/jscript"> // 创建vue的实例对象 var vue = new Vue({ el:"#app",//el:指定vue语法的区域 data:{ //设置元素中需要使用的数据 }, methods:{//定义方法 btnclick:function(){ alert("123") } } }) </script> </body>5、生命周期
beforeCreate： 执行的时候，data和methods中的数据都还没有没初始化
created：data 和 methods 都已经被初始化
beforeMount：模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
mounted：内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面。页面加载完成，执行的操作放在该函数中
beforeUpdate： 页面中显示原来的数据，但是此时data中数据是最新的，页面尚未和最新的数据保持同步
Updated： 页面和 data 数据已经保持同步了，都是最新的
（图片来自vue官网）如图：
} } }) </script> </body>## 5、生命周期 beforeCreate： 执行的时候，data和methods中的数据都还没有没初始化 created：data 和 methods 都已经被初始化 beforeMount：模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中 mounted：内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面。页面加载完成，执行的操作放在该函数中 beforeUpdate： 页面中显示原来的数据，但是此时data中数据是最新的，页面尚未和最新的数据保持同步 Updated： 页面和 data 数据已经保持同步了，都是最新的
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
