Vue框架(上)

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 <!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
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:"<p>hello{{msg}}<p>"
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">
    <!-- {{}}是插值表达式，中间出现的info是vue变量 -->
    <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     <!--1）插值表达式可以直接做简单运算-->　
 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     <!--1）v-指令名="变量"，变量是需要data提供数据值的  -->
 5     <p v-text="info"></p>
 6     <!--2）v-指令名="常量"，常量采用常量基本的语法，数字与布尔类型等可以直接书写的直接书写，字符串等需要特殊符号的需要添加符号-->
 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     <!--3）v-html可以解析html语法-->
13     <p v-html="`<b style='color:red'>好的</b>`"></p>
14     <p v-text="'<b>好的</b>'"></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事件；用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

 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         <!-- 事件指令：v-on:事件名="事件函数名"   -->
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         <!-- v-on:事件名="事件函数" 可以简写为 @事件名="事件函数"  -->
30         <p @mouseover="overAction()">悬浮</p>
31         <p @mouseover="overAction(10)">悬浮1</p>
32         <p @mouseover="overAction(10, 20)">悬浮2</p>
33         <p @mouseover="overAction(10, 20, $event)">悬浮3</p>
34 
35         <!-- 事件传参：
36          @事件='方法'  默认传入事件对象 $event
37          @事件='方法()'  不传递任何参数
38          @事件='方法(参数...)'  只传递自定义参数
39          @事件='方法($event, 参数...)'  自定义传参时传递事件对象
40          -->
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绑定不支持数组和对象。

 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         <!--1) 语法：v-bind:属性名="变量" -->
35         <p id="p1" class="p1" style="" title="" index="">属性指令1</p>
36         <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2</p>
37 
38         <p v-bind:index="p1">自定义属性也可以被vue绑定1</p>
39         <!--2) v-bind:属性名="变量" 简写 :属性名="变量" -->
40         <p :index="p1">自定义属性也可以被vue绑定2</p>
41         <p :title="'文本提示'">悬浮文本提示</p>
42 
43         <!--3) style样式属性绑定 -->
44         <p :style="myStyle">样式绑定1</p>
45         <p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2</p>
46 
47         <!--4) class类属性绑定 -->
48         <p :class="myc1">样式绑定3</p>
49         <p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p>
50         <!--xxx是类名，是否起作用有布尔类型变量yyy值决定 -->
51         <p :class="{xxx:yyy}">样式绑定5</p>
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="变量" 绑定数据会时时更新(修改表单标签值，值会时时映射给绑定的变量)