VUE框架的初识

VUE框架的初识

1. 初步了解Vue.js框架（渐进式前端框架）

   Vue.js是一种轻量级的前端MVVM框架。同时吸收了React（组件化）和Angular（灵活指令页面操作）的优点。是一套构建用户界面的渐进式框架，以数据驱动DOM，Vue 采用自底向上增量开发的设计。

   // vue配套的一些插件
   Vue Router  全局路由
   Vuex        组件与组件间通信
   Vue Cookie  cookie的管理
   ​
   ​
   // 使用Vue 
   导入 ==> 创建Vue对象  ==> 挂载到指定的页面标签（如果操作整个页面，可将整个页面用一个标签嵌套）
   ​
   示例：

   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '.wrapper'  // 只能控制检索到的第一个class为wrapper的页面结构
       })
    </script>
   ​

   // 注意：由于挂载点与对象是一一对应的关系，所以在挂载点应该采用id来做挂载点标识，不应该用class。

2. Vue对象

   vue 对象的属性有：

   el： 挂载点，与页面建立联系

   data：属性数据，控制挂载点属性，向页面提供数据

   methods：方法，控制挂载点的事件

   computed：计算属性，监听方法内部属性的改变

   watch：监听属性，监听外部方法对应的属性的改变

   <script>
       var vue = new Vue({
           el: '#app',
           data: {
               msg: '12345',
               info: '上山打老虎'
           }
       });
       console.log(vue.$data.msg);
       console.log(vue.msg);
   </script>
   ​

   vue.$data.msg与vue.msg的区别？

   一个被Vue对象控制的页面结构就称之为一个组件。
   组件与控制该组件的Vue对象是一一对应的关系，vue.$data.msg对象的属性，vue.msg则是组件中的。？
   ​

   对象的属性具体用法实例

   <div id="app">
       <p>
           <input type="text" v-model="firstName">
       </p>
       <p>
           <input type="text" v-model="lastName">
       </p>
       <input type="text" v-model="aaa">
   ​
       <!--姓名 = firstName + " " + lastName-->
       <h2>{{ firstName + " " + lastName }}</h2>
   ​
       <!-- 将姓名替换为 firstName + " " + lastName -->
       <!--<h2>{{ fullName() }}</h2>-->
       <h2>{{ fullName }}</h2>
   </div>
   </body>
   ​
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               aaa: '',
               firstName: '',
               lastName: '',
               // fullName: '姓名'
           },
           // methods: {
           //     fullName: function () {
           //         return this.firstName + " " + this.lastName
           //     }
           // }
   ​
           // 一个属性变量的值依赖于多个属性变量的值
           // 特殊点: data绑定的属性值是固定的, computed绑定的属性值是动态的(函数的返回值)
           computed: {
               fullName: function () {
                   this.aaa;
                   console.log("监听到内部拥有的变量在改变");
                   if (this.firstName || this.lastName) {
                       return this.firstName + " " + this.lastName
                   }
                   return "姓名"
               }
           }，
   
           watch: {
               // 为fullName该属性绑定了一个监听事件
               // fullName的定义还是在data或computed
               // fullName属性值一旦改变，绑定的监听事件就会被调用执行
   ​
               // 多个变量依赖于一个变量
               fullName: function () {
                   console.log("该方法被调用了");
   ​
                   f_l_arr = this.fullName.split(" ");
   ​
                   this.firstName = f_l_arr[0];
                   this.lastName = f_l_arr[1];
               }
           }
       });

   computed和watch的区别：computed是监听方法内部属性变量的改变，然后影响外部的属性变量的改变，实现属性的动态的属性值。watch则是监听对应的变量的属性值是否改变。

3. Vue中的指令

   vue 中指令的表示方法   V-指令

   指令的类别：

   文本指令： v-text  v-html  v-once  插值表达式  {{ }}

   <p v-text="txt"></p>
   <p v-html="hml"></p>
   ​
   ​
   <p>{{ num + 1 }}</p>
   <p>{{ num + "12345" }}</p>
   <p>{{ num / 5 }}</p>
   <p>{{ num + msg }}</p>
   ​
   ​
   <script>
       new Vue({
           el: '#app',
           data: {
               msg: "vue的变量",
               txt: "vue的text指令",
               hml: "<b>vue的html指令</b>",
               num: 1000
           }
       });
   </script>
   ​
   v-text   纯文本指令
   v-html="hml"   解析HTML格式的文本  指令
   v-once    数据一旦渲染就不能改变
   插值表达式  {{ num }}   获取数据，类似于引用文本

​ 事件指令：v-on:事件名  简写  @事件名

​                       -- v-on="事件绑定的变量名"

​        -- :事件名  来设置事件触发的条件

​        -- 整体语法: v-on:事件名="事件绑定的变量名"
   ​                       -- 事件绑定的变量名 由 methods来提供具体的方法实现

在事件指令中，变量名后可以给参数， 例如：

@click='btnClick($event, 自定义参数们)

所以在使用事件指令的更能灵活的实现不同布局切换和数据的调用

<div id="app">
       <p v-on:click="action1" v-text="msg1"></p>
       <p v-on:dblclick="action2" v-text="msg2"></p>
       <p @mouseenter="action3" v-text="msg3" style="background: red"></p>
   </div>

   <script src="js/vue.js"></script>
   <script>
       var vue = new Vue({
           el: '#app',
           data: {
               msg1: "点击事件",
               msg2: "双击事件",
               msg3: "鼠标悬浮事件",
           },
           methods: {
               action1: function () {
                   alert("天楚狂")
               },
               action2: function () {
                   alert("地楚狂")
               },
               action3: function () {
                   alert("人楚狂")
               },
           }
       });
   </script>

​      属性指令：  v-bind:属性名         简写   :属性名

​                          -- v-bind="属性绑定的变量名"
   ​                          -- :属性名  来设置事件触发的条件  (style | class | 自定义属性)
   ​                          -- 整体语法: v-bind:属性名="属性绑定的变量名"
   ​                          -- 属性绑定的变量名 由 data来提供具体的方法实现

<div id="app">
       <!-- 自定义的属性 -->
       <p v-bind:owen="tag">{{ msg }}</p>

       <!--<a href="/static/article/{{ article.id }}"></a>-->
       <a :href="url"></a>
       <!--<a :href="'/add_article/' + abc"></a>-->
       <a :href="'/static/article/' + aid">前往{{ aid }}篇文章</a>

       <button @click="btnClick">获取第100篇文章的id</button>
   </div>
   </body>

   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               msg: "属性指令",
               tag: 1,
               url: '/static/article/1',
               aid: 10
           },
           methods: {
               btnClick: function () {
                   // this.$data.aid = 100;
                   this.aid = 100;
               }
           }
       });
   </script>

// 例子中利用了事件指令和属性指令的结合，实现了数据的改变

​         表单指令：   文本指令不需要绑定东西: v-text="变量名"
   ​                               属性指令需要绑定属性: v-bind:属性名="变量名"  => :属性名="变量名"
   ​                               事件指令需要绑定事件: v-on:事件名="变量名"  => @事件名="变量名"
   ​                                表单指令需要绑定表单元素的value: v-model:value="变量名" => 只对value进行绑定,
   ​                                 -- 所以直接书写 v-model="变量名"

<body>
   <div id="app">
       <input type="text" value="初始value" v-model="msg">
       <input type="text" value="初始value" v-model="msg">
       <p>{{ msg }}</p>

       <!-- v-model针对于表单元素 -->
       <form action="" method="get">
           <!-- 1、双向绑定：服务于文本输入框 -->
           <!-- v-model存储的值为输入框的value值 -->
           <div>
               <input type="text" name="usr" v-model="in_val">
               <input type="password" name="ps" v-model="in_val" >
               <textarea name="info" v-model="in_val"></textarea>
           </div>

           <!-- 2、单选框 -->
           <div>
               <!-- 单选框是以name进行分组，同组中只能发生单选 -->
               <!-- v-model存储的值为单选框的value值 -->
               男：<input type="radio" name="sex" value="male" v-model="ra_val">
               女：<input type="radio" name="sex" value="female" v-model="ra_val">
               <p>{{ ra_val }}</p>
           </div>

           <!-- 3、单一复选框 -->
           <!-- v-model存储的值为true|false -->
           <!-- 或者为自定义替换的值 -->
           <div>
               <input name="sure" type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
               {{ sin_val }}
           </div>

           <!-- 4、多复选框 -->
           <!-- v-model存储的值为存储值多复选框value的数组 -->
           <div>
               <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
               <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
               <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
               {{ more_val }}
           </div>

           <input type="submit" value="提交">
       </form>

   </div>
   </body>

   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               info: "一次性数据",
               msg: "改变后的value",
               in_val: '',
            // 默认值可以决定单选框默认选项
            ra_val: 'male',
            // 默认值为true，单一复选框为选中，反之false为不选中
            sin_val: '',
            // 数组中存在的值对应的复选框默认为选中状态
            more_val: ['喜好女的','不挑']
           },
           methods: {

           }
       });
   </script>

​         条件指令： v-show | v-if v-else-if v-else

v-if 在消失的时候不会被渲染， v-show会以   display：none 渲染页面

<style>
           p {
               width: 200px;
               height: 200px;
               background: orange;
           }

           [v-cloak] { display: none; }

           div {
               width: 400px;
               height: 100px;
           }

           .red { background-color: red; }
           .yellow { background-color: yellow; }
           .green { background-color: green; }

       </style>

   <div id="app" v-cloak>
       <!--
       条件指令：
       v-if
       v-show
       -->
       <button @click="btnClick">切换</button>
       <!-- v-if在消失的时候,不会被渲染, 而v-show以display: none;进行渲染 -->
       <p v-if="is_open"></p>
       <p v-show="is_open"></p>

       <hr>
       <!-- 事件绑定函数, 可以加括号(), 一旦加()就代表要传入参数, 系统就不再传入事件参数 -->
       <!--如果想传入事件参数, 1:不加括号  2.加括号需用$event-->
       <button @click="changeColor('red', $event)">红</button>
       <button @click="changeColor('yellow')">黄</button>
       <button @click="changeColor('green')">绿</button>
       <div class="red" v-if="color == 'red'">红体</div>
       <div class="yellow" v-else-if="color == 'yellow'">黄体</div>
       <div class="green" v-else>绿体</div>
   </div>
   </body>
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               is_open: 0,
               color: 'red'
           },
           methods: {
               btnClick: function () {
                   this.is_open = !this.is_open;
               },
               // a1: function () {
               //     this.color = 'red'
               // },
               // a2: function () {
               //     this.color = 'yellow'
               // }

               changeColor: function (color, ev) {
                   console.log(color);
                   console.log(ev);

                   // this.color = color;
               }
           }

       });
   </script>
 

​         循环指令：v-for="(ele, index) in eleArr"  |  v-for="(v, k, i) in dic"

<div id="app">
       <!--
       循环指令：v-for="obj in objs"
       -->

       <h3>{{ list[4] }}</h3>
       <h3>{{ dic['gender'] }} {{ dic.gender }}</h3>

       <hr>

       <!--遍历数组-->
       <!--<p v-for="cless in list">-->
           <!--<span>-->
               <!--<b>{{ cless }}</b>-->
           <!--</span>-->
       <!--</p>-->
       <p v-for="(cls, index) in list">
           <span>
               <b>{{ index }} : {{ cls }}</b>
           </span>
       </p>

       <!--遍历对象(字典)-->
       <p v-for="(value, key, index) in dic">
           <span>
               <b>{{ index }} - 【{{ key }}】：{{ value }}</b>
           </span>
       </p>

       <!--复杂结构-->
       <!--name:O age:8-->
       <!--name:E  age:58-->
       <!--name:H age:7-->
       <p v-for="person in pArr">
           <span v-for="(v, k) in person" style="margin-right: 30px">
               <b>{{ k }}</b> : <i>{{ v }}</i>
           </span>
       </p>
   </div>

   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               list: ["语文", "数学", "英语", "编程", "吹牛逼"],
               dic: {
                   name: 'B',
                   age: 18,
                   gender: 'male',
               },
               pArr: [
                   {
                       name: "O",
                       age: "8",
                   },
                   {
                       name: "E",
                       age: "58",
                   },
                   {
                       name: "H",
                       age: "7",
                   },
               ]
           },

       });

   </script>

1. 一个实现简易留言板的案例（todolist)

   <style>
           span {
               background: green;
               padding: 5px;
               color: red;
               margin-right: 20px;
               border-radius: 50%;
           }
   </style>  //样式
   ​
   ​
   <div id="app">
       <p>
           <input type="text" v-model="txt">
           <button @click="addMsg">留言</button>
       </p>
       <ul>
           <!--<li><span>x</span>第二条</li>-->
           <!--<li>第一条</li>-->   要求留言以堆栈方式展现
           <li v-for="(msg, index) in msgs">
               <span @click="deleteMsg(index)">x</span>
               {{ msg }}
           </li>
   ​
       </ul>
   </div>
   ​
   ​
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               txt: '',
               msgs: []
           },
           methods: {
               addMsg: function () {
                   var txt = this.txt;
                   if (txt) {
                       // unshift shift push pop
                       // this.msgs.push(txt);
                       this.msgs.unshift(txt);  //实现消息的堆栈
                       this.txt = '';
                   }
               },
               deleteMsg: function (index) {
                   this.msgs.splice(index, 1)  // 删除留言， 以index作为起始位置，切一个，不给任何值
               }
           }
       });
   </script>

2. 事件指令和style属性结合使用

   <div id="app">
       <p :style="a"></p>
       <p @click="btnClick" :style="{width: '200px', height: h, backgroundColor: 'red'}">变高</p>
   ​
   </div>
   ​
   ​
   ​
   // 根据点击事件切换不同的样式
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               a: {
                   width: '200px',
                   height: '200px',
                   // 'background-color': 'red'
                   backgroundColor: 'red'
               },
               h: '200px'
           },
           methods: {
               btnClick: function () {
                   this.h = '300px'
               }
           }
       });
   </script>

3. 事件指令与class属性的使用

   实现不同的类样式的切换，class属性   {类名: 是否起作用} 字典内前面是类名，而字典的value值则是代表了是否该类起作用的判断条件

   <style>
   ​
           .red {
               width: 200px;
               height: 200px;
               background: red;
           }
           .yellow {
               width: 100px;
               height: 100px;
               background: yellow;
           }
   ​
           .orange {
               width: 100px;
               height: 100px;
               background: orange;
           }
   ​
           .y {
               border-radius: 50%;
           }
   </style>
   ​
   ​
   ​
   <div id="app">
       <button @click="redAction">变红</button>
       <button @click="yellowAction">变黄</button>
       <p :class="cname"></p>
   ​
   ​
       <!-- class: {}语法 => abc为类名, def为该类名的值,值可以为true|false, 代表abc是否起作用-->
       <!-- {类名: 是否起作用} -->
       <p :class="{abc: def}"></p>
   ​
       <button @click="orangeAction">切换</button>
       <p :class="{orange: is_orange}"></p>
   ​
   ​
       <!-- class: []语法 => 多类名 -->
       <p :class="[a, b, c]"></p>
   ​
       <!--整体语法-->
       <!-- x和z是变量: x值就是类名, z值决定类名y是否起作用 -->
       <p :class="[x, {y: z}]"></p>
   </div>
   ​
   ​
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               cname: '',
               def: false,
               is_orange: '',
               a: 'aaa',
               b: 'bbb',
               c: 'ccc',
               x: 'red',
               z: true
           },
           methods: {
               redAction: function () {
                   this.cname = 'red'
               },
               yellowAction: function () {
                   this.cname = 'yellow'
               },
               orangeAction: function () {
                   this.is_orange = !this.is_orange
               }
           }
       });
   </script>