Vue.js 基础用法
入门案例
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 使用vue需要先引包
<div id="app">
{{message}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
</div>
new Vue({
// 可以直接运算和三元运算,注意不能使用if
el:'#app',
data:{
message:'hello world', //注意不要写分号结尾
number:100
}
});
v-on 指令[简写 @]
- 可以用
v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
v-on:click
<div id="app">
{{message}}
<button v-on:click="fun1('good')">点击改变</button>
</div>
new Vue({
el:'#app',
data:{
message:'hello world'
},
methods:{
fun1:function(msg){
this.message=msg;
}
}
});
v-on:keyup
<div id="app">
<input type="text" v-on:keydown="fun1($event)">
<input type="text" @keydown.p.prevent="fun2" />
</div>
new Vue({
el:'#app',
methods:{
fun1:function(event){
var keyCode=event.keyCode;
if(keyCode<48 || keyCode>57){
event.preventDefault();// 不操作,也不会在input显示
}
},
fun2:function(){
// 按下P键, 并且p不在input中输入
alert("按下p");
}
}
});
v-on:mouseover
- Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或
event.stopPropagation()。
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover.stop="fun2($event)">这是一个文件域</textarea>
</div>
</div>
new Vue({
el:'#app',
methods:{
fun1:function(){
alert("div");
},
fun2:function(event){
alert("textarea");
//阻止冒泡继续向下传播, 如果不加.stop则需要下一行代码
// event.stopPropagation();
}
}
});
v-text与v-html
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
new Vue({
el:'#app',
data:{
message:"<h1>hello Vue</h1>"
}
});
页面展示:
<h1>hello Vue</h1>
hello Vue
v-bind[简写 :冒号]
- 插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令
<div id="app">
<font size="5" v-bind:color="ys1">小红</font>
<font size="5" :color="ys2">小绿</font>
<hr>
<a v-bind={href:"http://www.baidu.com/index/"+id}>itcast</a>
</div>
new Vue({
el:'#app',
data:{
ys1:"red",
ys2:"green",
id:1
}
});
v-model
- 如果用 value=“user.username” 则会原样输出user.username
用户: <input type="text" name="username" v-model="user.username" /><p></p>
密码: <input type="text" name="password" v-model="user.password" />
<input type="button" @click="reverse" value="test" />
new Vue({
el:"#app",
data:{
user:{
username:"小黑",
password:"罗小黑战记"
}
},
methods:{
reverse:function(){
this.user.username="小黑-变身",
this.user.password="罗小黑战记-大电影"
}
}
});
v-for
遍历基本 -> 遍历普通数组和json
<div id="app">
<ul>
<li v-for="(value,index) in names">{{value}}={{index}}</li>
<li v-for="(key,value,index) in user">{{value}}={{key}}={{index}}</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
names:['小黑',"小白","阿根"],
user:{
id:'1',
name:"小黑"
},
}
});
遍历多个对象
<div id="app">
<table border="1">
<tr>
<td>序号</td>
<td>id编号</td>
<td>名称</td>
</tr>
<tr v-for="(user,index) in users">
<td>{{index}}</td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
</tr>
</table>
</div>
new Vue({
el:'#app',
data:{
users:[
{ id:'1', name:"小黑"},
{ id:'2', name:"小白"},
{ id:'3', name:"阿根"},
{ id:'4', name:"老府"}
]
}
});
v-if与v-show
v-if 是根据表达式的值来决定是否渲染元素v-show 是根据表达式的值来切换元素的display css属性
<div id="app">
<span v-if="flag">测试v-if</span>
<span v-show="flag">测试v-show</span>
<button @click="qiehuan">切换显示/隐藏</button>
</div>
new Vue({
el:'#app',
data:{
flag:true
},
methods:{
qiehuan:function(){
this.flag=!this.flag;
}
}
})
Vue生命周期
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
vm.$destroy();
- vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容
beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象created ：数据已经绑定到了对象实例，但是还没有挂载对象beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动
