vue.js的基本知识与使用——2018年9月30日

vue.js是基于js的前端框架，vue（）是一个构造函数，里面封装了很多属性和方法，使用前都要实例化一个vue对象。

1. vue.js的引入方式

   <script src=""></script>把vue.js的路径放入src中即可

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>在线引入
   

2. vue.js中的模型对象

   vue.js的模型对象是数据模型对象的一个对象字面量,本质就是vue实例的一个data属性，在data放入要渲染的数据。

3. 模板指令v-text，v-html渲染变量的区别

   v-text只能输出纯文本，不能解析html代码，而v-html则可以解析变量中的html代码。

   
   

   实例

   <div id="box">
       <!--插值法，{{变量名}}-->
       <h2 >{{message}}</h2>
       <!--使用模板指令v-text 显示一个变量，只显示纯文本-->
       <h2  v-text="message"></h2>
       <!--v-html 可以显示带有html标签的字符串-->
       <div v-html="message1"></div>
   </div>
   
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
       //创建一个vue实例,只允许一个变量：对象字面量
       new Vue({
           //绑定挂载点 el：‘css选择器‘, vue实例的作用域，页面的元素
           el: '#box',
           //data 属性：创建数据模型 ：对应mvvm中的model层
           data: {
               message: 'hello world',
               message1: '<h2 STYLE="color: red">hello world</h2>'
           }
       })
   </script>

4. 属性绑定v-bind，事件绑定v-on

   v-bind:属性名=“属性值（数据模型中的属性）”，v-bind可以简写成：
   v-on：事件=“方法名（methods中的属性）” v-on可以简写@

   实例

   <!--创建一个挂载点-->
   <div id="box">
       <!--模板(挂载点内的元素)可以写在挂载点内，也可以写在vue属性中。-->
       <!--vue内的templa模板 优先级高于 挂载点内的模板-->
       <h3>{{message1}}</h3>
       <!--属性绑定-->
       <!--给模板标签绑定属性: v-bind:属性名=“属性值（vue变量或表达式）-->
       <!--可以简写 ：属性名=属性值-->
       <h2 :style="style+'background-color:blue;'" @click="alert">{{message1}}</h2>
   
       <!--事件绑定-->
       <!--v-on:事件名='变量名' v-on简写@ -->
       <h3 @click="change">{{message1}}</h3>
   
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
       new Vue({
           el: '#box',
           // template: '<h2>hello php</h2>',
           // 数据模型
           data: {
               message1: 'hello Superman',
               style:'color:red;',
           },
           // 方法模型
           methods: {
                   alert: function () {
                       alert('弹窗事件');
                   },
                   change: function () {
                       // this是当前实例，会自东跳到data
                       this.message1 = 'bad bad day';
                   }
               }
   
       })
   </script>

5. 双向绑定v-model

   双向绑定是页面中的数据可以实时改变 数据模型中的属性值，v-model=“变量名”

   实例

   <div id="box">
       <!--input标签的特点：显示内容也可以输入内容-->
       <!--v-bind 绑定value属性，与vue中的数据模型进行绑定，单项绑定-->
       <!--v-model='变量',实现双向绑定  模型中的数据随模板的数据改变而改变-->
       <input type="text" v-model="info">
       <h2>{{info}}</h2>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
       new Vue({
           el: '#box',
           data: {
               info: 'jackie'
           }
       })
   </script>

6. vue.js的侦听器watch

   侦听器watch是vue实例的一个属性，可以检测变量的变化，并且完成相应的function

   实例

   <div id="box">
       用户名：<input type="text" v-model="username" name="" id="">
       <h3>{{length}}</h3>
       <!--  v-show 模板指令true则显示，false则影藏-->
       <h3 v-show="isShow" :style="warning">{{info}}</h3>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
       new Vue({
           el: '#box',
           data: {
               username: '',
               length: 0 ,
               info: '用户名太短',
               warning: 'color:red',
               isShow: false
           },
           // 侦听器：watch实时监测数据的变化，并实时更新数据模型中属性，完成指定动作
           watch: {
               //vue是面向数据编程的，侦听的对象也是数据
               //每发生一次变化就会调用一次
               username: function () {
                   this.length = this.username.length;
                   if (this.username.length < 6) {
                       this.isShow = true;
                   }else{
                       this.isShow = false;
                   }
               }
           }
       })
   </script>