在vue中举例说明html差值,Vue基础语法1——模板语法知识点总结（新手必看！）...

Vue作为现在最火的框架之一，它的入门相比来说还是比较简单的。这里我整理了Vue的基础语法和使用案例，希望对大家学习Vue有一定的帮助！

一、模板语法

1.差值

-文本

数据绑定最常见的形式就是Mustache语法(双大括号)的文本差值。

{{}}标签将会被替换成对应数据对象上对应属性的值。

只要绑定的数据对象上相对应的属性发生改变，插值处的内容就会更新

{{msg}} -- {{num}} -- {{flag}} -- {{obj.a}} -- {{arr[1]}} -- {{tip}}

new Vue({

el:"#app",

data:{

msg:"hello vue",

num:10,

flag:true,

obj:{

a:3

},

arr:[0,"1",false],

tip:"tip"

}

})

运行结果：

image.png

从上述运行结果可以看出：

1.{{}}的属性时在vue数据对象data中定义的

2.属性值可以任意数据类型，都能在页面上显示出来

3.{{}} 不能解析标签

-纯html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

v-html 相当于原生js中的 innerHTML 的功能,相当于jQuery中的().html()

v-text 相当于原生js中的 innerText 的功能,相当于 jQuery 中的().text()

,一般会用 文本 形式代替 {{ msg }}

v-once 只能执行一次性的插值，当数据改变时，插值处的内容不会更新。

下面用个小案例比较一下：

哈哈

哈哈

哈哈

new Vue({

el:"#app",

data:{

msg:"hello"

}

})

运行结果如下：

image.png

根据运行结果可总结：

1.v-once确实是指定一次的插值，数据改变也不会发生变化。

2.v-html可以解析标签并获取最新数据

3.v-text不能解析标签，但可获取最新数据

-表达式

Vue提供了对js表达式的支持，但是每个绑定都只能包含单个表达式。

下面看个小例子

{{ sex === 0 ? "女" : "男" }} -- {{ msg.split("").reverse().join("") }}

new Vue({

el:"#app",

data:{

sex:1,

msg:"hello"

}

})

运行结果如下:

image.png

根据运行结果可总结：

1.vue支持像三目这种单个表达式、字符操作等

2.{{if(ok) return "ok"}}这种语句是错误的

-指令

指令 是带有 v- 前缀的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

input中使用v-model ，就会把它的值当做是输入框的value值

标签上v-html，就会把它的值插入到该标签内部 (v-text也是如此)(以上用法已有介绍)

v-if 用来做条件判断 (做条件判断的还有v-else-if v-else v-show)

v-for 遍历循环使用

v-on 绑定事件

v-bind 绑定属性

不常用的：

v-slot

v-pre

v-cloak

v-once

v-if，v-show用法:

如果为真时显示

如果为假时显示

{{ count }}

0-3

3-6

6-9

9-10

为真显示

为假显示

new Vue({

el:"#app",

data:{

flag:true,

count:Math.random()*10

}

})

运行结果如下：

image.png

虽然v-if和v-show功能相同，但是看页面结构会发现不同

image.png

总结v-if和v-show的区别：

1.v-if是“真正”的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。

2.v-if是惰性的，如果初始渲染条件为假，则什么也不做，直到条件变为真时才渲染

3.v-show 不管初始条件为真还是为假，元素都会被渲染，为假时就是设置css样式为display：none。

总的来说，v-if是渲染还是不渲染的问题——运行时消耗更大

v-show是显示和隐藏的问题——初始渲染消耗更大

如果要频繁的切换，一般我们要使用v-show；运行的条件很少改变的话，我们一般使用v-if

-绑定属性

绑定属性v-bind用于标签的属性前，属性值为一个变量。

适合场景举例：

1.img 的 src 属性(从服务器获取了地址)

2.组件间的传值

下面用个小例子来学习一下：

000

111

222

• 000
• 111
• 222

new Vue({

el:"#app",

data:{

username:"张三",

aIndex:0

}

})

运行结果：

image.png

查看页面结构可见：

image.png

从上面案例可总结：

1.当属性值为变量应使用v-bind。不然属性值就是定值。

2.结合了点击事件和绑定属性实现选中样式的变化