我个人觉得其实vue的入门很简单,但是要精通确实要有实战的经验的积累,单凭官网的简单实例,以及网上的教材很难做到精通,现在就让我们一起从vue的入门学起吧!
首先下载vue.js 文件 ,然后引入,(这里为了方便学习和使用所以先下载下来,实质项目中并不需要,只需npm 或者yard ) 很简单一个script 标签 <script src="./vue.js"></script>
其次,在div 中绑定vue 上代码, <div id="app"> 您好! {{message}}, {{arr}}以后日子多多指教 </div>
<script> var vm = new Vue({ el: '#app', data: { message: '我是VUE', arr: [1,2,3,4] } }) </script>
一个简单的vue实例就创建完了,然后在浏览器上跑起来,结果是 : 您好! 我是VUE, [ 1, 2, 3, 4 ]以后日子多多指教 是不是很简单就学会了.
好,接下来我学习一下vue的生命周期, vue 的生命周期也叫钩子函数,是vue从创建到销毁所触发的函数,
1.beforeCreate(){console.log("创建之前");}, beforeCreate(),这是第一个生命周期函数, 表示实例完全被创建出来之前, 会执行它,此时data和methods中的数据和方法都还没有被初始化,在这里是获取不到data中的数据的,console会报错,undefined
2.created(){console.log("创建完成");}, created()这是第二个命周期函数 在created 中, data和methods,都已经被初始好了,所以 如果要调用 methods 中的方法, 或者操作data中的数据, 最早只能在created 中操作
3.beforeMount(){console.log("挂载之前");}, 这是第三个生命周期函数,表示模板已经在内存中编译完成了,但是尚未把数据模板渲染到页 如果这个时候想获取页面中的元素只能获取到未编译的值console.log(document.getElementById("h3").innerText);
console.log(this.$refs.myh3); //undefind 还没有获取到dom元素,在 beforeMount执行的时候, 页面中的元素, 还没有被真正替换过来, 只是之前写的一些模板字符串
4.mounted(){console.log("挂载完成");},这是第四个生命周期函数,表示 内存中的模板,已经真实的挂载到了页面中, 用户已经可以看到渲染好的页面了
console.log(document.getElementById("h3").innerText);
console.log(this.$refs.hh3.innerText); //ok 这句话表明 要操作dom 元素至少在挂载完成后
注意 : mounted 是实例创建期间的最后一个生命周期, 当执行完mounted 就表示,实例已经被完全创建好了, 此时, 如果没有其他操作的话, 这个实例, 就静静的躺在我们的内存中, 一动不动
5.接下来是运行中的两个事件
beforeUpdate(){ //这个时候表示 , 页面还没有被更新,数据更新了
console.log("页面上元素的内容:" + document.getElementById("h3").innerText);
console.log("data中的msg数据是:" + this.msg);
结论: 当执行了beforeUpdate 的时候,页面中显示的数据还是旧的,此时data中的数据是最新的, 页面尚未和最新的数据保持同步
6.updated(){console.log("更新完成"+this.message);}, console.log("页面上元素的内容:" + document.getElementById("h3").innerText);
console.log("data中的msg数据是:" + this.msg);
updated 事件执行的时候, 页面和data 中的数据已经保持同步了, 都是最新的
7.beforeDestroy(){console.log("销毁之前");},
8.destroyed(){console.log("销毁了");}
这就是vue的八个钩子函数(也叫生命周期),vue 的生命周期很重要,学好了vue的生命周期学懂了一半vue,这里已经讲得比较清楚,如果还有疑问,欢迎一起来探讨.
学完了vue 的生命周期,接下来我们学习一下,vue的模板语法,也是很简单,直接上代码,
<body>
<div id="app">
{{message}} {{1+2}} {{1+1>1?'YES':'No'}}
<span v-if="1>2">我是v-if </span>
<button v-on:click="myFun">修改1</button>
<button @click="message=666">修改2</button>
<div v-html="myHTML"></div>
<img v-bind:src="imageURL" alt="">
<div v-bind:id="myId" v-bind:class="myClass"></div>
<div :id="myId" :class="myClass"></div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue',
imageURL: 'http://fb.topitme.com/b/2d/0f/112647038896a0f2dbo.jpg',
myId: '007',
myClass: 'app',
myHTML: `<div style="width:100px;height:100px;background:orange">我是html格式的数据,你要按html的方式给我渲染出来</div> `
} ,
methods:{
myFun(){
this.message = 5555;
}
}
})
</script>
插值表达式 {{message}} 可以直接访问data里的属性 ,比如message 插值表达式还可以做简单的运算以及逻辑判断,如三木运算符,
v-if 是指令 跟 v-show (后面会讲到)一样都是指令,他是动态的隐藏与显示元素, 但两者又有不一样的区别, v-if 是是将dom元素整个添加或删除, 而v-show是简单的控制元素的display的属性dom元素还在。比较官方的说法是,
1.手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
5.使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。
这里需要注意的一点是, v-if 和v-for(后面会讲到)一起使用时，v-for 具有比 v-if 更高的优先级。
v-on:click 也是vue提供的指令, 会触发methods 中的方法 , ,如上面的代码, 点击修改1 的时候会触发myFun 改变message 从而改变视图, 是不是很方便, 并不用我们去操作整个Dom 对象,只需关注业务逻辑, 这就是vue 的精髓之一.它3还挺功了简写的方式 @click
v-html 指令会将HTML 代码渲染出来,而不是直接读出来
v-bind: 指令是用来绑定元素的属性的, 绑定之后就可以动态的添加属性的值了, 它也提供了简写的方式 ' : ' 冒号. 属性绑定之后也可以做简单js 运算, 比如 :value = '1+1'
计算属性,顾名思义就是一种属性, 计算说明是动词,只有发生变化的时候才会改变的属性值,
比如 computed: {
reverseMessage(){
return this.message.split('').reverse().join('');
} 我们可以直接在插值表达式中使用它, {{reverseMessage}},而不用做任何的处理,这里他定义的是一个function 的形式,所有的不需要改变的值都可以事先存到计算属性当中,知道发生改变,计算属性会自动更新到视图中.
属性监听: 是监听data中的属性,一旦发生改变,立即更新视图, 具体的用法可以这样用
data: {
message: 'Hello Vuew',
},
watch: {
message(newValue){
console.log("message的新值是"+newValue);
}
}
双向数据绑定其实就是绑定v-modul 指令,就可以实现数据的双驱动效果,数据改变立马更新到视图中,上代码:
<input type="text" v-model="message">
{{message}}
data:{
message:'双向数据绑定就是这么简单'
}
ok,现在我来讲一下class ,上面有说到要讲的, 咱作为最笨的人,学习不能落下任何一个知识点,
class 你可以绑定一个对象,比如
<div v-bind:class="{active:isActive}">我是绑定class 的div</div>
然后在style 中定义好active 的属性值,
.active {
width: 100px;
height: 100px;
background: orange;
}
然后就可以通过改变isActive 的值来动态的改变div 的class
<button @click='isActive=!isActive'>改变div的class</button>
data:{
isActive:false
}
第二种情况: 绑定数组
<div v-bind:class="[classObject,msg]">我是绑定数组的div</div>
data: {
isActive: true,
msg: 'msg'
},
computed: {
classObject(){
return {
active: this.isActive,
}
}
}
第三种情况: 可以绑定计算属性
<div v-bind:class="classObject">我是绑定计算属性的div</div>
computed: {
classObject(){
return {
active: this.isActive,
}
}
}
同样的,我们也可以绑定style 属性进行css 样式
<div id="app">
<div style="width:100px;height:100px;background-color: orange;margin-bottom: 10px"></div>
<div v-bind:style="{width:styleObject.width,height: '100px',backgroundColor:'orange'}"></div>
<div v-bind:style="styleObject"></div>
<div v-bind:style="[styleObject,msgStyle]">普通信息</div>
<div v-bind:style="[styleObject,dangerStyle]">警告信息</div>
</div>
new Vue({
el: '#app',
data: {
styleObject: {
width: '100px',
height: '100px',
backgroundColor: 'cyan',
marginBottom: '10px'
},
msgStyle: {
color: 'lightgray'
},
dangerStyle: {
color: 'red'
}
}
})
这样是不是很简单明了,这就是vue作者考虑到css 样式做的特殊的处理.
7196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
