脚本宝典收集整理的这篇文章主要介绍了Vue笔记(一)——Vue指令&模板,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
用于记录个人学习vue笔记
let data = {msg:'我就是一个数据模型'}
<div id="app">
<span>我是视图</span>
</div>
数据驱动模式和MVVM的关系:MVVM是数据驱动模式的一种实现,Vue是MVVM的一种实现
模块语法已成为前端在数据驱动模式上View层最好的实现
<div id="app">
<!-- {{name}}值为fhj -->
<h1>{{name}}</h1>
</div>
let vm = new Vue({
el:'#app',
data:{
name:'fhj'
}
});
<!-- 完整写法 -->
<img v-bind:src="..."></img>
<!-- 缩写 -->
<img :src=".."></img>
<!-- 完整写法 -->
<button v-on:click="btn"></button>
<!-- 缩写 -->
<button @click="btn"></button>
指令(directive),即原生的自定义属性,在vue中是以 v- 为前缀的自定义属性
<span v-text="msg"></span>
<!-- 效果等同于 {{msg}} -->
<!-- v-text的权重高于{{}} -->
<div v-html="addHtml"></div>
let vm = new Vue({
data:{
addHtml:'<a>fhj</a>'
}
});
<!-- isshow的值会直接影响 div 在视图中是否显示,即 block 或 none -->
<div v-show="isshow"></div>
<!-- status的值会直接影响 div 在视图中是否存在 -->
<div v-if="status"></div>
<!--
data = 3 || [] || string || {}
div 会循环data.length 次
value 的值为变量的值
index 的值为下标||对象||属性名
-->
<div v-for="(value,index) in data">
<span>{{value}}</span>
<span>{{index}}</span>
</div>
<!-- 仅限于表单元素,双向绑定 -->
<input type="text" v-model = "msg"/>
<!-- 指定某个vue指令不编译,当字符串输出 -->
<span v-pre>{{msg}}</span> // {{msg}}
<!-- 内容只解释一次,当改变mess时不会再次映射到 span -->
<span v-once>{{msg}}</span>
以上是脚本宝典为你收集整理的Vue笔记(一)——Vue指令&模板全部内容,希望文章能够帮你解决Vue笔记(一)——Vue指令&模板所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。