20190215-vue学习笔记2

----20190215-vue学习笔记2—

vue中的 data() 和 methods()

data() 可理解为：在里面声明变量集群，在里面可以给变量赋值，并返回数据。
methods() 可理解为：方法集群，里面写的是方法，是事件。

<script type="text/javascript">
  export default{
      data(){   //要小写，大小写有区别，如果Data，就会没有用作，关联不上以下变量
          return{
              msg5:"<h6>v-text/v-html的区别</h6>  ",
              hello1:"hello Vue",
          }
      },

      methods:{  //方法，相当于函数，可定义多个函数
             
      },

  }

在vue里，一定要注意大小写之分，data(){} 标准写法，如果写成Data(){}，不会起作用，声明的变量关联不上。

html 文本显示的方式

v-text 与 {{ }}插值式（单向绑定）

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。
其中：v-text可以简写为{{}},并且支持逻辑运算。

 data(){  
          return{
              hello1:"hello Vue",	///声明hello1并赋值
          }
      },

<div>{{ hello1}}</div>
<div v-text="hello1"></div>

2种写法最终得出的效果是一样的。

v-html

v-html，也是文本输出，但是用于输出html。

v-text与v-html 的区别：

 data(){  
          return{
               msg5:"<h6>v-text/v-html的区别</h6>  ",	///声明msg5并赋值
          }
      },

		<div v-text="msg5"></div>
        <div v-html="msg5"></div>

结果如下：

可以看出
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

v-model

v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的 双向绑定，如果用于表单控件以外标签是没有用的。

 data(){  
          return{
               svmodel:"双向绑定",
          }
      },

		<!--双向绑定例子-->
        <input type="text" v-model="svmodel">
        <div v-text="svmodel"></div>

可以这样理解，v-model可以接收变量初始值，也可以将改变后的值赋给变量，从而得到变量的最终值。

v-bind

v-bind是用来绑定HTML属性。动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-bind只能实现单向绑定
v-model（v-bind+触发的input事件）实现双向绑定

注释例子：

 data(){  
          return{
               title_name:"注释说明：输入搜索内容",
          }
      },

<!--显示注释：文本框的属性绑定，v-bind,titlename下面有声明，-->
      <div v-bind:title="title_name">v-bind应用：显示注释</div>

效果如下：

单向绑定与双向绑定

单向绑定：（如v-text、v-bind）

1、所有数据只有一份
2、一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data)
3、如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。
其实单向绑定也有双向绑定的意味，不过页面变动后数据的变化不会自动更新。

双向绑定：（如v-model）
用户在视图上（view）的修改会自动同步到数据模型（data）中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。

v-on:click的应用

语法：
v-bind绑定的是属性，那么v-on就是绑定的是事件
v-on:事件名称=“方法名”        （事件绑定）

①v-on单击事件

methods:{  //方法，相当于方法/事件，可定义多个
       click_this_buttom:function(){
           alert("单击事件Test!你要搜索的内容是："+this.msg_search);  
           //alert 把文本用提示框显示出来
       }
     },

<div class="button white" v-on:click="click_this_buttom">单击搜索</div>

效果如下：

②v-on双击事件

methods:{  //方法，相当于方法/事件，可定义多个
        click_this_buttom:function(){
            alert("单击事件Test!你要搜索的内容是："+this.msg_search);
             //alert 把文本用提示框显示出来
        },
        click_double_buttom:function () {
          alert(this.msg_search + "_这是双击事件！ _"+this.title_name);
        }
      },

<div class="button white" v-on:click="click_this_buttom">单击搜索</div>
<div class="button white" v-on:dblclick="click_double_buttom">双击搜索</div>

双击button后，效果如下：

console.log()

console.log(); 给开发人员调试用到，会在浏览器的控制台显示内容。

click_this_buttom:function(){
                console.log("调试状态：这是单击事件，"+this.title_name + "  "+ this.msg_search );
            },

效果如下：