标签：el xxx app 元素 Vue 指令 var new
文章目录
v-text & v-html
在讲这两个指令之前，先说说我们很熟悉的 插值，再来说说用这两条指令替代插值的好处。
语法:
{{插值表达式}}
说明：
（1）这是使用Vue实例最简单的方式——花括号内部可以直接使用Vue实例的数据和方法
（2）不管是直接写个js语句，还是调用Vue实例，花括号内部必须有返回值
（3）当网速过慢，数据尚未加载成功时，页面时会显示最原始的花括号，这种现象叫做 插值闪烁 —— 使用指令可以避免这种现象
语法:
<span v-text="msg"></span>
<span v-html="msg"></span>
说明：
（1）将数据写到元素内部，如果数据是HTML语句，会被当作普通文本
（2）将数据写到元素内部，如果数据是HTML语句，会作为HTML被渲染
演示：
<div id="app">
<span v-text="msg"></span><br>
<span v-html="msg"></span><br>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
// 注意这里的数据
msg: "<h2>Lolisuki!<h2>"
}
});
</script>
v-model
语法:
<input type="checkbox" value="111" v-model="xxx">111<br>
<input type="checkbox" value="222" v-model="xxx">222<br>
<input type="checkbox" value="333" v-model="xxx">333<br>
说明：
（1）上面讲的v-text/v-html其实是单向绑定，因为此时页面上的元素并不能被用户改动
（2）而v-model可是实现模型与视图的双向绑定，因为使用v-model的元素都是用户可以在视图直接修改的
（3）所以可使用v-model的元素有：input、select、textarea、checkbox、radio等
（4）上面的这些元素，对应的绑定数据的类型是不同的。比如input、textarea对应字符串，select、checkbox对应数组
演示：
<div id="app">
<input type="checkbox" value="物述有栖" v-model="vtuber">物述有栖<br>
<input type="checkbox" value="神乐七奈" v-model="vtuber">神乐七奈<br>
<input type="checkbox" value="猫宫日向" v-model="vtuber">猫宫日向<br>
<h2>
你选择了：{{vtuber.join(" ")}}
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
vtuber: []
}
});
</script>
v-on
语法:
v-on:click="xxxxxx"
@click="xxxxxxx"
说明：
（1）用于给页面元素绑定事件
（2）之前我们使用的 event.preventDefault() 或 event.stopPropagation() 在Vue中如何实现呢？用下面的这些事件修饰符：
| 事件修饰符 | 作用 |
|---|---|
| .stop | 阻止事件冒泡 |
| .prevent | 阻止默认事件发生 |
| .capture | 使用事件捕获模式 |
| .self | 只有元素自身触发事件才执行，冒泡或捕获的都不执行 |
| .once | 只执行一次 |
演示：
<div id="app">
<button v-on:click="inc">增加</button>
<button v-on:click="dec">减少</button>
<h2>num = {{num}}</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
inc() {
this.num++;
},
dec() {
this.num--;
}
}
});
</script>
v-for
语法:
遍历数组：
v-for="item in items"
遍历对象：
v-for="value in object"
v-for="(value,key) in object"
说明：
（1）既可以遍历数组元素，又可以遍历对象属性
（2）还可以在遍历时加上下标，比如 v-for="(item, index) in items"
演示：
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} 的年龄是 {{user.age}}
</li>
</ul>
<br>
<ul>
<li v-for="(value, key) in person">
对象的属性{{key}}，对象的属性值{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
// 对象列表
users: [
{"name": "Alice", "age": 12},
{"name": "Mana", "age": 11},
{"name": "Hana", "age": 11},
],
// 单个对象
person: {"name": "Alice", "age": 12}
}
});
</script>
v-if & v-show
语法:
v-if="布尔表达式"
v-show="布尔表达式"
说明：
（1）v-if为false的时候，元素直接会不存在
（2）v-show为false的时候，元素只是display: none而已
（3）你甚至可以使用 v-else-if 和 v-else
演示：
<div id="app">
<button @click="show=!show">点我切换</button>
<h2 v-if="show">
Lolisuki！！！
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
}
});
</script>
v-bind
语法:
v-bind:属性名="Vue中的变量"
说明：
（1）v-bind用于在属性上（即标签上的各种字段）使用Vue数据
（2）因为元素的属性是不允许使用插值的，所以修改元素属性也只能使用v-bind
演示：
<div id="app">
<img v-bind:src="imgSrc" :height="imgHeight" :width="imgWidth"/>
<div v-bind:style="divStyle">Lolisuki!!!</div>
<div v-bind:class="divClass">Lolisuki!!!</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
imgSrc: "img/pic.png",
imgHeight: "600px",
imgWidth: "1000px",
divStyle: "color:pink",
divClass: "pink" // css中要有.pink类
}
});
</script>
❤️
标签：el,xxx,app,元素,Vue,指令,var,new 来源： https://blog.csdn.net/m0_46202073/article/details/115622949
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。