Vue的基本语法

1、Vue 基本语法

在标签中绑定 v-bind ：（要绑定的属性,也可以自定义声明的变量）="(要绑定的属性值)"  动态绑定数据。

如以下使用

注：这里的message是声明的变量

      <span v-bind:message="message">{{message}}</span>
      <span v-bind:style="message" >{{message}}</span>
      <span v-bind:title="arrr">{{arrr}}</span>

if else用法

标签内ok为布尔变量，如果ok为true则显示，为false，则不显示。

      <h1 v-if="ok">xxx</h1>
      <h1 v-else>hhh</h1>

if else if else用法

这里的text为字符串变量，判断这个字符串是否等于，如等于显示标签内容和标签，不等于不显示

标签内容和标签。

      <a v-if="text==='a'">a</a>
      <a v-else-if="text==='b'">b</a>
      <a v-else>c</a>

for循环

item是循环遍历时记录的值，index是循环时的下标，for的用法就是如此简单。

    <li v-for="item in items">
        {{item.message}}
    </li>
  <li v-for="(item,index) in items">
        {{item.message}}
        {{index}}
    </li>

2、绑定事件

事件的绑定需要使用到 v-on：（要触发的事件）=" (触发事件后执行的方法) "。

首先在Vue的methods属性中 函数体内定义一个函数，然后用v-on去绑定使用即可。

<button v-on:click="sayhi">点我</button>

Vue的常用7个属性（现学的三个属性）

el属性

用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符。

data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

methods属性

放置页面中的业务逻辑，js方法一般放置在methods中，使用v-on时调用的方法必须放在这里面。

什么是双向数据绑定?

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定，单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单项的，这时候和双向数据绑定有冲突。

3、双向绑定

双向绑定可以做到实时更新数据。

使用v-model可以实现双向绑定语法如下：

 <input type="text" v-model="text"/> 

v-model会忽略所以表单元素的value、cheked、seleced特性的初始值而总是将Vue实例的数据作为数据来源，所以应该通过javaScript在组件的data选择中声明初始值。

4.组件

在JS代码中使用Vue.component("(声明的组件名字)",

        <!--这里是使用了for循环遍历先把每次遍历的值用v-bind绑定并发送给自定义组件-->
        <jwk v-for="item in items" v-bind:jiang="item"></jwk>
        <!--可以接受的参数-->
        props : ['jiang'],
        <!--定义的模板-->
        template : '<h1 style="color: red">{{jiang}}</h1>',

}