Vue简介
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,其核心库只关注视图层。可以根据开发需求,来决定Vue框架控制项目的具体方位:可以是一个标签,也可以是一个页面,甚至可以是整个项目。
vue框架是一种前台框架,且参考了其他框架,具有轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用等优点。
MVC和MVVM的区别
基本代码MVVM模式
注意:
1.Vue实例不能控制body,及div中的那个id=‘app’不能写到body上。
2.通过Vue提供的指令,可方便的就能把数据渲染到页面上,不需要再手动的操作DOM元素。
3.methods里的方法要使用到data中的数据,那么就要使用this。
一个Vue实例:
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue导入title> 6 <script src="js/vue.js">script> 7 head> 8 9 <body> 10 11 <div id="app"> 12 <p v-text='number'><p> //插值表达式 13 <p v-html='content' @click='handleClick'><p> //v-html会转义 14 <p>{{ msg }}p> 15 div> 16 body> 17 18 <script> 19 new Vue({ 20 el: '#app', // el表示挂载点 21 template:"hello{{msg}}
" 22 23 // 这里的 data 专门用来保存每个页面的数据 24 data: { // data 属性中,存放的是 el 中要用到的数据 25 msg: "hello world", // 通过 Vue 提供的指令,就能把数据渲染到页面上 26 number:123, 27 }, 28 // vue实例的方法 29 methods:{ 30 handleClick:function(){ 31 // 方便之处就是不用管Dom 32 this.content = 'world'; 33 } 34 } 35 }) 36 script> 37 html>
挂载点
el就是挂载点,它就是告诉实例要找页面上节点id为app的元素来插入替换;
模板
template 为模板,可以理解为插入到页面的内容,或者是准备好的页面内容,一般在工作中template是不写在实例里面,页面上id为app的div包含的内容默认就是template;
实例
new Vue() 创建出来一个实例,就是一个vue的组件,我们可以看到挂载点,模板是写在实例里面,是实例的属性。data表示实例上的一些数据,methods表示实例上的方法,改变data里的数据项this.xxx。
实例相关成员介绍
挂载点
1.Vue渐进式框架:控制页面及项目的范围
2.Vue的环境导入:本地、cdn
3.Vue框架的优点:轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件式开发、单页面应用
4.Vue如何与HTML页面结构建立关联:挂载点
注意:
1. html与body不能作为挂载点
2.一个vue对象挂载点之后索引一个匹配结果,所以挂载点一般用id标识
数据
1.用data来为Vue环境提供数据,数据采用字典{ }形式
2.在插值表达式{{ }}中,直接书写数据的key来访问数据。
3.在外部通过接受实例的变量app,访问实例成员(实例成员都用$开头),间接访问到数据app.$data.info
4.在外部也可以通过实例变量app直接访问数据app.info
5.在Vue实例内部的方法methods中,使用变量,this.info(this在这等价于app)
<div id="app"> <p>{{ info }}p> <p>{{ info }}p> <p>{{ num }}p> <p>{{ arr }}p> <p>{{ dic }}p> div> <script src="js/vue.js">script> <script> let app = new Vue({ // 让app来接收实例 el: '#app', data: { // 采用data来定义变量,data后接字典。 info: 'message', num: 100, result: true, // 布尔le arr: [1, 2, 3, 4, 5], dic: { name: 'Owen', age: 17.5 } } }) script> <script> console.log(app); console.log(app.$data.info); console.log(app.info); script>
过滤器
1..过滤器本身就是数据处理函数,可以将插值表达式中的数据作为参数进行处理,得到的函数返回值就是处理后的结果。
2.过滤器的使用语法{{ ...变量 | 过滤器(...变量) }}
3.过滤器在实例中由filters成员提供
1 <div id="app"> 2 3 <p>{{ num + 3.5 }}p> 4 <p>{{ msg.split('')[4] }}p> // split拆分,[4]表示要取到的位数 5 <p>{{ num | f1 }}p> 6 <p>{{ 10, 20, 30, 40 | f2 }}p> 7 <p>{{ 10, 20 | f2(50, 80) }}p> // 可以对前面的四个结果统一过滤,也可以对部分结果进行部分过滤, 8 余下的参数用括号传进去 9 <p>{{ 120 | f2 }}p> // 可以多传 ,但不能少传,少传的参数用NaN代替 10 div> 11 <script src="js/vue.js">script> 12 <script> 13 new Vue({ 14 el: '#app', 15 data: { 16 num: 100, 17 msg: 'message' 18 }, 19 filters: { // 表示过滤器,可以写多个 20 // 总结:{{ num | f1 }} 21 f1: function (num) { 22 return num * 2 // 过滤后的结果 23 }, 24 // 总结:{{ a,b,c,d | f2 }} {{ a,b,c | f2(d) }} { a,b| f2(c,d) }} { a| f2(b,c,d) }} 25 f2: function (a, b, c, d) { 26 console.log(a, b, c, d); 27 return a + b + c + d 28 } 29 } 30 }) 31 script>
文本指令
1.插值表达式,同v-text指令一样,渲染普通文本
2.v-html指令可以渲染有html语法的文本,能解析html语法
3.文本指令中可以渲染变量,也可以渲染常量
1 <div id="app"> 2 <p>{{ info }}p> 3 4 5 <p v-text="info">p> 6 7 <p v-text="123">p> 8 <p v-text="true">p> 9 <p v-text="'abc' + info">p> 10 <p v-text="[1, 2, 3]">p> 11 12 13 <p v-html="`好的`">p> 14 <p v-text="'好的'">p> 15 div> 16 <script src="js/vue.js">script> 17 <script> 18 new Vue({ 19 el: '#app', 20 data: { 21 info: 'data提供的数据', 22 } 23 }) 24 script>
反引号补充
1.js多行字符串,反引号` `
2.反引号字符串中可以直接填充变量,语法为`$(变量名)`
let s1 = ` 第一行 // let表示声明一个变量
第二行
结束行`;
console.log(s1);
事件指令 (v-on简写为@)
1.语法:v-on:事件名="函数名(参数名)"
2.简写:@事件名="函数名(参数名)"
3.用methods实例成员提供 事件函数 的实现
4.事件传参:函数名 | 函数名() | 函数名(自定义参数) | 函数名($event, 自定义参数)
用法:
1).可作为绑定事件监控器。事件类型是由参数指定,表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
2).用在普通元素上时,只能监控原生DOM事件;用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
1 DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title> 6 <style> 7 body { 8 /*页面文本不允许选择*/ 9 user-select: none; 10 } 11 .low-num { 12 cursor: pointer; 13 } 14 .low-num:hover { 15 color: red; 16 } 17 style> 18 head> 19 <body> 20 <div id="app"> 21 22 <p class="low-num" v-on:click="lowNum"> 23 <span>点击减一:span> 24 <span>{{ num }}span> 25 p> 26 27 <p v-on:dblclick="dblAction">双击p> 28 29 30 <p @mouseover="overAction()">悬浮p> 31 <p @mouseover="overAction(10)">悬浮1p> 32 <p @mouseover="overAction(10, 20)">悬浮2p> 33 <p @mouseover="overAction(10, 20, $event)">悬浮3p> 34 35 41 div> 42 body> 43 <script src="js/vue.js">script> 44 <script> 45 let app = new Vue({ 46 el: '#app', 47 data: { 48 num: 99 49 }, 50 methods: { 51 lowNum: function () { 52 // 在vue实例内部的方法中,使用变量 53 // alert(this.num) 54 this.num -= 1; 55 }, 56 dblAction (ev) { 57 // alert('双击事件'); 58 console.log(ev) 59 }, 60 overAction(a, b, c) { 61 console.log(a, b, c) 62 } 63 } 64 }) 65 script> 66 html>
属性指令
1.语法:v-bind:属性名="变量"
2.v-bind:属性名="变量" 可简写为 :属性名="变量"
3.单值属性绑定: :title="变量" | :id="变量" | :自定义属性="变量"
4.style属性绑定: :style="字典变量" | :style="{css属性1:变量1,...,css属性n:变量n}"
5.class属性绑定: :class='变量' | :class="[变量1,...,变量n]" | :class="{}类名:布尔变量}"
用法:
1).动态绑定一个或多个特性,或一个组件prop到表达式。
2).在绑定class或style特性时,支持其他类型的值,如数组或对象。
3).没有参数时,可以绑定到一个包含键值对的对象。此时class和style绑定不支持数组和对象。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
1 DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性指令title> 6 <style> 7 [index] { 8 color: orange; 9 } 10 11 .ccc { 12 background-color: yellowgreen; 13 color: greenyellow; 14 border-radius: 50%; 15 } 16 .ccc1 { 17 background-color: yellowgreen; 18 } 19 .ccc2 { 20 color: greenyellow; 21 } 22 .ccc3 { 23 border-radius: 50%; 24 } 25 26 .ttt { 27 background-color: gold; 28 color: orange; 29 } 30 style> 31 head> 32 <body> 33 <div id="app"> 34 35 <p id="p1" class="p1" style="" title="" index="">属性指令1p> 36 <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2p> 37 38 <p v-bind:index="p1">自定义属性也可以被vue绑定1p> 39 40 <p :index="p1">自定义属性也可以被vue绑定2p> 41 <p :title="'文本提示'">悬浮文本提示p> 42 43 44 <p :style="myStyle">样式绑定1p> 45 <p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2p> 46 47 48 <p :class="myc1">样式绑定3p> 49 <p :class="[myc2,myc3,myc4,'bbb']">样式绑定4p> 50 51 <p :class="{xxx:yyy}">样式绑定5p> 52 53 54 55 <p @click="clickAction" :class="{ttt:yyy}">点击切换类p> 56 div> 57 body> 58 <script src="js/vue.js">script> 59 <script> 60 new Vue({ 61 el: '#app', 62 data: { 63 p1: 'q1', 64 myStyle: { 65 backgroundColor: 'pink', 66 color: 'deeppink', 67 'border-radius': '50%' 68 }, 69 c1: 'cyan', 70 c2: 'tan', 71 myc1: 'ccc ddd eee', 72 myc2: 'ccc1', 73 myc3: 'ccc2', 74 myc4: 'ccc3', 75 yyy: true, // false 76 }, 77 methods: { 78 clickAction() { 79 this.yyy = !this.yyy; 80 } 81 } 82 }) 83 script> 84 html>
表单指令
1. 语法:v-model="控制vaule值的变量"
2. :value="变量" 直接绑定数据不会时时更新(修改表单标签值,值不会时时映射给绑定的变量)
3.v-model="变量" 绑定数据会时时更新(修改表单标签值,值会时时映射给绑定的变量)