
# 一、常用指令
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