VUe.js基础2

mustache语法(小胡子语法)：{{xxx}}      ，

因为 new Vue({

el: '#app',

data: {

msg: 'hello Vue.js'

}

})

， new出来的对象里console.log胡来带_ // $ // #都是私有属性的标识，不希望外用  msg获取有三种（四种）：

在挂载的根组件里 data里的数据相当于全局变量。在根组件里的HTML结构里，通过三种方法访问data对象里（带new出来的data时对象，有其他情况不是new可能不是对象）

　　1.{{this._data.msg}} 

　　2.{{this.$data.msg}}

　　3.{{this.msg}}

　　4.{{msg}}  //只不过是上边 3省略了this (类比 JavaScript里全局方法省略window（window.console.log("xxxx")===console.log("xxxx")）)

那么，mustache语法还能写什么？======》

总结;

• null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的（{{里面值是null和undefined都显示不出来}}）

• 挂载在window身上的全局属性，我们都不能用的： 比如; console alert（因为我们使Vue框架人家尤哥给原型上添加这个window上的方法呀，没必要呀！）

• {{ }} 不写流程控制

  • for

  • if

  • while

  • do...while

• {{}} 支持三元表达式，同样也支持运算符

• 短路原则也是支持的

　　指令

　　指令是用来干嘛的？==>操作DOM

　　

　　解释 : MVVM vm -> v 数据驱动

　　所以： 今天开始，我们不操作dom，改成操作数据，数据要想操控DOM,那么我们需要依赖指　令，因为指令是直接绑定在dom身上的

　　

1. v-html  (innerHTML)

2. v-text (innerText或textContent)

3. v-bind  将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值

···html

<img v-bind:src = "src" />
<div v-bind:class = "">

</div>
<div v-bind:style = "">

</div>

```

简写

```html

<img v-bind:src="src" alt="">
<img :src="src" alt="">

```

v-bind 类名(:class)

==>对象形式用法

　　　```html

　　<p :class = "{ bg: true,size: true }"></p>
　　<p :class = "{ bg: true,size: false }"></p>
　　// <p :class = "{ [classA]: true,[classB]: true }"></p>

　　```

===>数组方法

　```html

<p :class = "[ 'size','bg' ]"></p>
<p :class = "[ classA,classB ]"></p>
<p :class = "[ classA,classB,5>3?'a':'b']"> </p>

　　```

样式绑定 v-bind:style( :style)

条件渲染

1. v-if

2. v-else-if

3. v-else

4. v-show 条件展示

事件处理器

• v-on

 表单控件绑定

• v-model

  • 双向数据绑定

    • VM 改变 V随之改变

    • V改变， VM也随之改变

  • v-model只用于表单

    • 理由： v-model默认绑定value属性

  • 技巧： 看到表单直接 v-model