前端 => 页面
html: 页面架构
css： 样式布局
js：操作数据，页面行为(前后端交互)
jq：js的封装，及其方便的完成页面特效
vue：js的框架
1.数据驱动
2.数据的双向绑定
3.虚拟DOM
1 认识vue
2 引入vue
3 vue实例
4 实例生命周期钩子
5 视图常规操作
6 条件渲染
7 列表渲染
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue导入</title> </head> <body> <div id="app"> <p title="普通p">p标签</p> <!-- v-bind vue的指令，可以被vue解析并处理 --> <!-- 第一个title：html标签的属性名(系统预定义的) --> <!-- 第二个titile：vue的变量 --> <p v-bind:title='title'>p标签</p> </div> </body> <!-- 引入外部vue js --> <script type="text/javascript" src="./js/vue.js"></script> <!-- 自身 js --> <script type="text/javascript"> // 创建vue实例，需要一个对象参数 new Vue({ el: '#app', data: { title: 'vue p' } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue实例之el</title> </head> <body> <div id="root"></div> <!-- <p v-bind:class="title" v-on:dblclick='action' v-model='abc' v-for="it in its"></p> --> <p v-bind:title='title'>p标签</p> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> // el: vue实例的挂载目标 // 表示vue创建的该实例只对挂载点内部的模块进行处理 new Vue({ el: '#root', data: { title: 'vue p' } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue data</title> </head> <body> <div id="app"> <p>{{ msg }}</p> <!-- 出现在模块中的变量，一般都需要默认初始值 --> <p v-text='txt'></p> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', // data为模块中的变量提供数据 data: { msg: 'vue 控制的 文本1', txt: 'vue 控制的 文本2', } }); console.log(app) // el | data 为 vue变量 => 以$开头，区别普通变量 console.log(app.$data) console.log(app.$data.msg) // 所有在模块中产生的变量，也可以通过vue的实例直接访问 console.log(app.msg) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue data</title> <style type="text/css"> .p1 { width: 300px; height: 100px; border: 1px solid #333; } </style> </head> <body> <div id="app"> <!-- v-on指令用于绑定事件 --> <!-- 事件对应逻辑由vue实例的methods处理 --> <!-- 绑定的事件(函数)需不需要携带参数列表： 无=>无需传参 有=>需要传参 --> <!-- 需要操作事件(需要事件对象)无需传参，传参后会都是事件 --> <p class="p1" v-on:click='func'>{{ msg }}</p> <p class="p1" v-on:click='fn("zero", 88888)'>{{ msg }}</p> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { msg: 'vue context' }, methods: { func: function (obj) { // alert('呵呵') // this: vue实例 => app // alert(this.msg) console.log(obj) }, fn: function (name, salary) { console.log(name) console.log(salary) } } }); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> <div> 姓：<input type="text" v-model='first_name' /> </div> <div> 名：<input type="text" v-model='last_name' /> </div> <!-- <p>姓名：{{ full_name() }}</p> --> <!-- 采用计算方式的变量可以不在data中赋初值 --> <p>姓名：{{ full_name }}</p> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { first_name: '', last_name: '' }, // methods: { // full_name: function () { // return this.first_name + " " + this.last_name; // } // }, // 一个变量依赖于多个变量，一般对该变量采用计算处理 computed: { full_name: function () { return this.first_name + " " + this.last_name; } } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> <div> 姓名：<input type="text" v-model='full_name' placeholder="姓与名以空格隔开" /> </div> <p>姓：{{ first_name }}</p> <p>名：{{ last_name }}</p> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { full_name: '', first_name: '', last_name: '' }, watch: { full_name: function () { // 监听full_name，然后拆分为姓与名 var fname = this.full_name; var arr = fname.split(' '); this.first_name = arr[0]; this.last_name = arr[1]; } } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>delimiters</title> </head> <body> <div id="app"> {{ msg }} [[ msg ]] ${ msg } </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { msg: '数据' }, // delimiters配置自定义绑定符号 // 值为拥有两个元素的数组，元素为字符串形式 delimiters: ['${', '}'] }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生命周期钩子</title> </head> <body> <div id="app"> {{ msg }} </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { msg: '数据' }, // 该钩子方法触发：vue实例刚被创建(只拥有内存位置),其他任何操作都未执行 // 就满足的beforeCreate钩子的触发条件，系统就会回调该方法的实现 // 用户在该触发条件情况下想去完成某些逻辑，那么就去实现该钩子 beforeCreate: function () { }, /* // 系统内部调用 if (beforeCreate) { beforeCreate() } // ... // ... if (created) { created() } if (beforeMount) { beforeMount() } // ... */ // 数据与事件加载完毕，el并没有进行挂载 created: function () { // 获取想要的数据(请求后台) // 事件的解绑或换绑或重新绑定 // 对虚拟DOM进行修改 }, // DOM树加载完毕，el渲染完毕 mounted:function () { // 可能需要对DOM进行操作(交给模块处理) } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>视图</title> <style type="text/css"> p { border: 1px solid #ff6700; height: 30px; line-height: 30px; } .abc { border-color: yellowgreen; } [class] { border-width: 5px; } [v-cloak] { display: none; } </style> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <!-- <div id="app" v-cloak> --> <div id="app"> <!-- v-model实现数据的双向绑定 --> <input type="text" v-model='msg'> <input type="text" v-model='msg'> <p>{{ msg }}</p> <p v-text='msg'></p> <!-- 只赋值一次 --> <p v-once>{{ msg }}</p> <!-- 可以解析html语法的标签 --> <p v-html='msg'></p> <!-- 属性的绑定：属性值有变量控制 v-bind:属性名 :属性名 --> <!-- <p class="active"></p> --> <!-- <p v-bind:class='active'></p> --> <p :class='active'></p> <!-- 事件的绑定：事件值为函数名(带或不带参数列表) v-on:事件名 @事件名 --> <p @dblclick='func'></p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { msg: '初值', active: 'abc' }, methods: { func: function () { alert('呵呵') } } }) </script> </html>
一： 认识vue
优点：
1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据
2、方便构建单页面应用程序（SPA）
四： 实例生命周期钩子
定义：
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
钩子方法：
beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。
activated：keep-alive 组件激活时调用。
deactivated：keep-alive 组件停用时调用。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
重点钩子：
created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据)
mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM