个人名片:
😊作者简介:一名大一在校生,web前端开发专业
🤡 个人主页:python学不会123
🐼座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡,
前言
记录vue的学习笔记,有什么不对的地方,欢迎各位大佬进行指正,共同学习进步
Vue的语法分为两种:
(1)插值语法:双大括号表达式 (“Mustache”语法)【一个】
(2)指令语法:指令(以v-开头的自定义标签属性)【很多】
插值语法
- 功能:用于解析标签体内容,向页面输出数据
- 写法:
{{xxx}}
,xxx是js表达式,且可以直接读取到data中的所有属性,可以调用对象的方法 - 备注:里面写js表达式:有返回值的js代码,而不是js语句
指令语法
- 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
- 举例:
v-bind:href="xxx"
或 简写为:href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中的所有属性 - 备注:Vue中有很多的指令,且形式都是:v-??
今天我们先学习插值语法
1.Mustache语法
用法:通常用 {{}}
功能:用于将data中的文本数据插入到页面中
2.v-text指令
用法: <h2 v-text="message"></h2>
功能:用途和{{}}一致,但没有{{}}灵活
代码示例:
<div id="app">
<h2>
{{message}}
</h2>
<h2 v-text="message"></h2>
</div>
<script>
new Vue({
el: '#app',
data: {
message:'你好啊',
},
methods: {}
});
</script>
3.v-html指令
用法:<h2 v-html="url">{{url}}</h2>
功能:将内容按照HTML格式进行解析并显示对应内容
代码实例:
<div id="app">
{{message}}
<h2 v-html="url">{{url}}</h2>
</div>
<script>
new Vue({
el: '#app',
data: {
message:'你好啊11',
url:'<a href="https://www.baidu.com">百度一下</a>'
},
methods: {}
});
</script>
4.v-once指令
用法: <h2 v-once>{{message}}</h2>
功能 表示元素和组件只渲染一次,不会随着数据的改变而改变
代码示例:
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好啊11'
},
methods: {}
});
</script>
5.v-pre指令
用法: <h2 v-pre>{{message}}</h2>
功能:用于跳过元素的编译过程,显示原本的Mustache语法
代码示例:
<div id="app">
<h2> {{message}} </h2>
<h2 v-pre>{{message}} </h2>
</div>
<script>
new Vue({
el: '#app',
data: {
message:'你好哦'
},
methods: {}
});
</script>
6.v-cloak指令
用法:<div id="app" v-cloak>
功能:在vue解析之前,div中有一个属性v-cloak
在vue解析之后,div中没有一个属性v-cloak
代码示例:
<div id="app" v-cloak>
<h2> {{message}} </h2>
<h2></h2>
</div>
<script>
new Vue({
el: '#app',
data: {
message:'111'
},
methods: {}
});
</script>
总结:
常用的:
v-text
,v-html 和{{}}
{{}}
和v-text
为一组,均能将数据解析后插入到页面中,但{{}}更常用,因为其更灵活v-text
和v-html
为一组,二者用法一致,均用于向页面展示数据,后者会将内容按照html格式进行解析后再展示,会带来xss攻击问题(需要解决方案)
不常用的:
v-once
、v-pre
和v-cloak
一般很少使用这三个除非特定场合比如:
v-pre
和v-cloak
为一组,v-pre
用于展示原本的Mustache
语法,v-cloak
配合特定css样式可起到相反的效果v-once
用于一次性展示,比如需要同时展示变化前后数据的场景