内容简介：更新元素的 textContent更新元素的 innerHTML
v-text
更新元素的 textContent
<h1 v-text="msg"></h1>
v-html
更新元素的 innerHTML
<h1 v-html="msg"></h1>
v-bind
当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<script>
// 2 创建 Vue 的实例对象
var vm = new Vue({
// el 用来指定vue挂载到页面中的元素，值是：选择器
// 理解：用来指定vue管理的HTML区域
el: '#app',
// 数据对象，用来给视图中提供数据的
data: {
url: 'http://www.baidu.com'
}
})
</script>
v-on
- 作用：绑定事件
- 语法：
v-on:click="say"orv-on:click="say('参数', $event)" - 简写：
@click="say" - 说明：绑定的事件从
methods中获取
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 方法传参 -->
<a @click="doSomething（“123”）"></a>
<script>
// 2 创建 Vue 的实例对象
var vm = new Vue({
el: '#app',
// methods属性用来给vue实例提供方法（事件）
methods: {
doSomething: function(str) {
//接受参数，并输出
console.log(str);
}
}
})
</script>
事件修饰符
-
.stop阻止冒泡，调用event.stopPropagation() -
.prevent阻止默认事件，调用event.preventDefault() -
.capture添加事件侦听器时使用事件捕获模式 -
.self只当事件在该元素本身（比如不是子元素）触发时触发回调 -
.once事件只触发一次
v-model
- 作用：在表单元素上创建双向数据绑定
- 说明：监听用户的输入事件以更新数据
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
v-for
基于源数据多次渲染元素或模板块
<!-- 1 基础用法 -->
<div v-for="item in items">
{{ item.text }}
</div>
<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>
key属性
- 推荐：使用
v-for的时候提供key属性，以获得性能提升。 - 说明：使用
key，VUE会基于key的变化重新排列元素顺序，并且会移除 key 不存在的元素。 - 官方解释：当
Vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的track-by="$index"
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div>
二、样式处理 -class和style
v-bind
<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>
<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
--- script ---
<script>
// 2 创建 Vue 的实例对象
var vm = new Vue({
el: '#app',
data: {
activeColor: 'red',
fontSize: 30,
baseStyles: {
color: 'red',
'font-size': '30px'
},
overridingStyles: {
color: 'green',
}
}
})
</script>
三、v-if 和 v-show
条件渲染
v-if v-show
四、提升用户体验：v-cloak
- 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。 - 防止刷新页面，网速慢的情况下出现
{ message }等数据格式
<div v-cloak>
{{ message }}
</div>
五、提升性能
v-pre
说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
<span v-pre>{{ this will not be compiled }}</span>
v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
<span v-once>This will never change: {{msg}}</span>
六、Dom元素获取: v-ref
在父组件上注册一个子组件的索引,便于直接访问,不需要表达式,必须提供参数id。可以通过父组件的 $refs 对象访问子组件
- 当
v-ref和v-for一起使用时,注册的值将是一个数组，包含多有的子组件，对应于绑定数组；如果v-for使用在一个对象上，注册的值将是一个对象，包含所有的子组件，对应于绑定对象
Dom元素获取: v-el
为Dom元素注册一个索引，方便通过所属实例的 $els 访问这个元素,可以用 v-el：some-el 设置 this.$els.someEl.
<span v-el:msg>hello</span> <span v-el:other-msg>world</span>
通过 this.$els 获取相应的DOM元素:
this.$els.msg.textContent // ==> "hello" this.$els.otherMsg.textContent // ==> "world"
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Swift语言实战入门
伍星、罗飞、刘志华、王浩力、刘蕾 / 人民邮电出版社 / 2014-10-23 / 79
《Swift语言实战入门》以Swift语言的基础知识和实战技巧为主要内容，佐以大量的实例和图片进行讲解。全书内容分为三大部分，共11章节。第一大部分讲述Swift语言的基础知识和语法，第二大部分讲解开发框架和库的相关内容，第三大部分集中讲解以2048游戏为例的实战演练，从入门到实战层层递进。本书注重实战，秉承着学以致用的原则，让读者真正看后能够实际操作。120个代码清单全部共享，配套教学视频在线收......一起来看看 《Swift语言实战入门》 这本书的介绍吧!
