Vue
通过对框架的了解与运算程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目
什么是Vue
可以独立完成前后端分离式web项目的JavaScript框架
为什么要学习Vue
三大主流框架之一:Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端，以前端代码复用方式渲染整个页面：组件开发
特点
单页面web应用 数据驱动 数据的双向绑定 虚拟DOM
#1.下载:https://vuejs.org/js/vue.min.js #2.导入vue.js #3.在自定义的script标签中创建vue对象 #4.用vue对象来控制页面内容
<div id="app"> {{ }} </div> <script src="js/vue.min.js"></script> <script> new Vue({ el:"#qpp" }) </script>
挂载点与数据渲染
<body> <div id="app"> <!-- 插值表达式：插值表达式中出现的名字代表vue变量--> <div class="root">{{ abc }}</div> <div class="main">{{ xyz }}</div> </div> </body>
<script src="js/vue.min.js"></script> <script> //挂载点：vue对象通过el参数(挂载点)与页面结构建立联系，vue对象与页面的结构应该是一对一关系，所以挂载点选择id作为唯一标识 // new Vue({ // el:'.root' // }); new Vue({ el: '#app', //在挂载点插值表达式中出现的名字是变量，需要vue对象通过data提供 data: { abc: '内容', xyz: 3.14, } }); </script>
Vue实例
<body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue.min.js"></script> <script> //vue实例(对象) let app = new Vue({ el: '#app', data: { msg: 'message' } }); </script> <script> //如何访问'message' // console.log(app); console.log(app.$el); //vue的变量都是以¥开头 // console.log(app.$data.msg) //vue实例(对象)就是挂载点 console.log(app.msg) </script>
<div id="app"> <!-- v-on来为事件绑定方法，事件用 :事件名 标注 --> <!-- 语法：v-on:事件名 = "事件变量" --> <!-- 事件变量：由vue实例的methods提供 --> <button v-on:click="btnClick">{{ msg }}</button> </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { msg: "按钮" }, methods: { btnClick: function () { alert('点击事件') } } }); </script>
<html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .btn { width: 100px; height: 40px; background-color: orange; } .button { width: 100px; height: 40px; background-color: yellowgreen; } </style> </head> <body> <div id="app"> <!-- v-on来为事件绑定方法，事件用法：事件名 标注--> <!-- 语法：v--on:事件名 ='事件变量'--> <!--事件变量：由vue实例的methods提供--> <button v-on:click="btnClick" v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button> <!--v-bind来为属性绑定变量，属性用：属性名 标注 eg： ：style ：class ：id--> <!--语法：v-bind:属性名 ='属性变量'--> <!--事件变量：由vue实例的data提供--> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { msg: '按钮', my_style: { // background: 'red' }, my_cls: 'btn' }, methods: { btnClick: function () { // alert('123') // console.log(this.my_style.background) // this.my_style.background = 'pink'; //修改类名就能直接对应一套css样式 if (this.my_cls == 'btn') { this.my_cls = 'button' } else { this.my_cls = 'btn' } } } }) </script> </html>
#comouted功能：将function封装给一个变量，通过该变量就可以得到该function的返回值 #应用场景：一个变量(name)依赖于多个变量(first_name+last_name)的值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .span { color: red; } </style> </head> <body> <div id="app"> <!--v-model就是为表单元素 value属性绑定变量--> <p>姓：<input type="text" placeholder="姓" v-model="first_name"></p> <p>名：<input type="text" placeholder="名" v-model="last_name"></p> <p> <!--插值表达式中可以书写 变量表达式--> <!--姓名：<span class="span">{{ first_name + last_name }}</span>--> <!--姓名：<span class="span" v-on:click="my_name">{{ name }}</span>--> <!--<span class="span">{{ name() }}</span>--> 姓名：<span class="span">{{ name }}</span> </p> </div> </body> <script src="js/vue.min.js"></script> <script> //vue实例(对象) let app = new Vue({ el: '#app', data: { first_name: '', last_name: '', //name：'姓名', }, // methods: { // my_name: function () { // this.name = this.first_name + this.last_name // }, // }, computed: { name: function () { if (this.first_name == '' && this.last_name == '') { return '姓名' } else { return this.first_name + this.last_name } } } }); </script> </html>
#watch是用来监听变量的，当监听的变量的值一旦发生变化，就会触发监听的函数 #应用场景：多个变量（first_name、last_name）依赖于一个变量(name)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p> 姓名：<input type="text" placeholder="姓名" v-model="name"> </p> <p>姓：{{ first_name }}</p> <p>名：{{ last_name }}</p> </div> </body> <script src="js/vue.min.js"></script> <script> let app = new Vue({ el: '#app', data: { name: '', first_name: '姓', last_name: '名', }, //watch是用来监听变量的，当监听的变量的值一旦发生变化，就会触发监听的函数 //应用场景：多个变量(first_name、last_name)依赖于一个变量(nam,e) watch: { name: function () { // console.log('name 值改变了'); // console.log(this.name); this.first_name = this.name[0]; this.last_name = this.name[1]; } } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="main"> <!--查找表达式{{ }}符号与其他语言冲突，可以自定义表达式的符号--> <!--实例的delimiters：['左侧符号','右侧符号']--> {{ msg }}{{{ msg }}}${ msg } </div> </body> <script src="js/vue.min.js"></script> <script> //vue实例(对象) new Vue({ el: '#main', data: { msg: '信息' }, // delimiters: ['{{{', '}}}'], delimiters: ['${', '}'] }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { msg: 'message' }, methods: { fn: function () { return '123' } }, beforeCreate: function () { console.log('实例化被创建了'); console.log(this.msg);//undefined }, created: function () { console.log('实例已经创建'); console.log(this.msg);//message console.log(this.$el);//undefined }, mounted: function () { console.log('实例已经渲染到页面'); console.log(this.msg);//message console.log(this.$el);//有值 console.log(this.fn)//有值 } }) </script> </html>
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。
这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。
这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。
-
类型：
Function -
详细：
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
-
类型：
Function -
详细：
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，
$el属性目前不可见。
-
类型：
Function -
详细：
在挂载开始之前被调用：相关的
render函数首次被调用。该钩子在服务器端渲染期间不被调用。
-
类型：
Function -
详细：
el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。注意
mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉mounted：mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
该钩子在服务器端渲染期间不被调用。
-
类型：
Function -
详细：
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
-
类型：
Function -
详细：
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意
updated不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉updated：updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }
该钩子在服务器端渲染期间不被调用。
-
类型：
Function -
详细：
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
-
类型：
Function -
详细：
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。
-
类型：
Function -
详细：
实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
-
类型：
Function -
详细：
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
-
类型：
(err: Error, vm: Component, info: string) => ?boolean -
详细：
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回
false以阻止该错误继续向上传播。你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。
错误传播规则
-
默认情况下，如果全局的
config.errorHandler被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。 -
如果一个组件的继承或父级从属链路中存在多个
errorCaptured钩子，则它们将会被相同的错误逐个唤起。 -
如果此
errorCaptured钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。 -
一个
errorCaptured钩子能够返回false以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的errorCaptured钩子和全局的config.errorHandler。
-