一、基本使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in list">{{item}}</li> </ul> <div ref="box" id="app111">{{message}}</div> <button @click="handleUpdate()">修改数据</button> </div> <button onClick="destory()">销毁</button> </body> </html> <!-- 必须导入的vue文件 --> <script src="vue.js"></script> <script> var vm = new Vue({ el: "#app", beforeCreate() { console.log("beforeCreate....."); console.log(this.message) }, created() { console.log("created....."); setTimeout(() => { for (var i = 0; i < 10; i++) { this.list.push(i); } this.message = "zhang" }, 3000) }, data: { list: [], message: "" }, computed:{ }, beforeMount() { console.log("beforeMount..."); console.log(this.$refs) console.log(app.innerHTML) }, mounted() { console.log("mounted..."); console.log(this.$refs) console.log(app.innerHTML) }, beforeDestroy() { console.log("beforeDestroy....."); console.log(this.$refs) console.log(app.innerHTML) console.log(this.message) }, destroyed() { console.log("destroyed......") console.log(this.$refs) console.log(app.innerHTML) console.log(this.message) }, methods: { handleUpdate() { this.message = "张三" + new Date().getTime() }, }, beforeUpdate() { console.log("beforeUpdate"); console.log(app.innerHTML) // console.log(app.innerText) }, updated() { console.log("updated") console.log(app.innerHTML) // console.log(app.innerText) } }) function destory() { alert(1) vm.$destroy() } </script>
1、计算属性与methods
/*
computed:
计算属性：通过属性计算得来的属性
只要属性发生变化那么该方法就会被调用
computed里面的方法调用的时候是不需要加()
computed计算属性，如果属性的值没有变化的时候会从缓存中进行读取。而不是重新计算
methods:里面的方法每次调用的时候都会重新执行 相比较来说非常耗费性能
v-model.number:将字符串转换为数字
*/
2、methods 与 computed watch三者之间的区别
/*
methods 与 computed watch三者之间的区别
methods:里面书写的是方法，调用的时候需要加() 每次执行的时候内部所以的参数都会重新执行
computed:计算属性，当计算完毕以后会将计算的结果保存在缓存中，第二次在进行计算的时候
如果数据没有发生变化，那么会从缓存中读取结果。性能要比methods高.计算属性调用的时候是不
需要加()的
watch:监听属性的变化。watch是不需要调用的，只要属性发生了变化，那么就会接受到2个值
一个是新值 一个是旧值。watch是高频率事件 如果能用computed实现的功能尽量不要用watch
深度监听：监听对象的时候，增加deep：true
*/
另：属性监听<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <h3>我的名字叫{{fullName}}--------------{{names}}</h3> <hr> <input type="text" v-model="obj.name"> <input type="text" v-model="obj.age"> <button @click="handleDeep()">开始监听</button> </div> </body> </html> <script src="vue.js"></script> <script> /* 属性监听 watch 当属性发生改变的时候用来监听属性的变化 watch里面的方法名字都是属性的key值 */ var vm = new Vue({ el:"#app", data:{ firstName:"", lastName:"", fullName:"", obj:{ name:"张三", age:22 } }, methods:{ handleDeep(){ this.$watch("obj",()=>{ console.log("调用了") },{ deep:true }) } },
computed:{ names(){ return this.firstName+this.lastName; } },
//能用computed解决的，尽量不用watch watch:{ firstName(newVal,oldVal){ if(!/李/g.test(newVal)){ this.fullName = newVal + this.lastName; } }, lastName(newVal,oldVal){ this.fullName =this.firstName+ newVal; }, obj:{ handler(){ console.log("obj调用了") },
//监听对象时需要深度监听，需要加deep:true deep:true } }
}) </script>
3、生命周期
/*
创建前
beforeCreate当初始化的时候读取生命周期函数，但是不能进行调用
created:当beforeCreate初始化完毕以后，会执行created。当执行created的时候会读取当前vm
身上所以的属性(把所有的属性都添加一个getter和setter方法)和方法遍历挂载到vue的实例身上。在created中可以访问到数据和方法了
(可以做的事情：ajax的请求)
//outerHTML不是w3c的规范
beforeMount当执行beforeMount的读取到所有的虚拟DOM,和数据进行结合，但是没有生产真
正的DOm结构但是这里面是访问不到虚拟DOM的
mounted：挂载完成，在这里面虚拟DOM和数据结合完成后生成真正的DOM结构，在这里可以使用refs
进行dom的操作
使用一些插件进行实例化的时候我们都可以在这里面进行操作 例如 swiper better-scroll
beforeDestroy：销毁前是可以访问到当前dom的元素，但是销毁后也就destroyed就不能访问到
dom元素了.把vm与DOM之间的关联全部断开
beforeUpdate:当数据进行修改的时候会执行beforeUpdate，但是数据不会立马进行更新，而是
数据和模板进行相结合的状态
updated数据和模板结合完毕生成新的DOM结构
后学新增：(keep-alive 包裹动态组件component 时)
activated： 当组件进入活跃状态的时候
deactivated: 当组件为缓存状态的时候
*/
4、常用的实例化方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p>年龄：{{age}}</p> <p>姓名：{{message}}</p> </div> <button onClick="add()">添加el</button> <button onClick="destroy()">销毁</button> <button onClick="forceUpdate()">强制更新</button> </body> </html> <script src="vue.js"></script> <script> var vm = new Vue({ // el:"#app", data:{ message:"李想" } }) vm.age = 19; console.log(vm) function add(){ //外部设置el 设置vue的作用域 vm.$mount("#app"); } function destroy() { //销毁vm实例与DOM之间的关联 vm.$destroy() } function forceUpdate() { //如果说属性没有getter/setter方法的时候我们可以调用以下这个方法进行强制更新 vm.$forceUpdate(); } </script>
/*
实例身上的方法
$on：绑定事件
$emit：触发事件
$off：解绑事件
$once：触发一次
$mount:手动挂载
$destroy：销毁
$forecUpdate：强制更新
$nextTick()
*/
二、脚手架的使用
<!--
全局安装：
npm install vue-cli -g 脚手架的安装：
vue init webpack-simple myapp (myapp 为要新建的文件名字) 后，按照黑窗口指令 cd myapp 切换到当前文件 npm install 或 cnpm install 安装依赖 npm run dev 运行 -->
之后，就可以正常使用喽