VUe.js基础2
mustache语法(小胡子语法):{{xxx}} ,
因为 new Vue({
-
null 和 undefined 是不会显示的,其他数据类型都是支持的,可以显示的({{里面值是null和undefined都显示不出来}})
-
挂载在window身上的全局属性,我们都不能用的: 比如; console alert(因为我们使Vue框架人家尤哥给原型上添加这个window上的方法呀,没必要呀!)
-
{{ }} 不写流程控制
-
for
-
if
-
while
-
do...while
-
-
{{}} 支持三元表达式,同样也支持运算符
-
短路原则也是支持的
指令
指令是用来干嘛的?==>操作DOM
所以: 今天开始,我们不操作dom,改成操作数据,数据要想操控DOM,那么我们需要依赖指 令,因为指令是直接绑定在dom身上的
-
-
v-text (innerText或textContent)
-
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)
条件渲染
-
v-if
-
v-else-if
-
v-else
-
v-show 条件展示
事件处理器
-
v-on
表单控件绑定
-
v-model
-
双向数据绑定
-
-
V改变, VM也随之改变
-
-
v-model只用于表单
-
理由: v-model默认绑定value属性
-
-
技巧: 看到表单直接 v-model
-