vue绑定href_Vue模板语法
模板语法
Vue.js 使⽤了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定⾄底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把DOM 操作次数减到最少。
⽂本
数据绑定最常见的形式就是两个⼤括号{{}}，⼤括号中间的内容是data⾥⾯的数据，不仅可以是变量还可以是表达式。当绑定的数据对象上的属性值发⽣改变，插值处的内容就会更新。
⽰例：
<body>
<div id="app">
<!-- 变量 -->
<p>{{ message }}</p>
<!-- 表达式 -->
<p>{{ num + 1}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
message: "⼩飞侠",
num: 10
html href属性}
}
})
</script>
</body>
</html>
v-html指令的使⽤
有时我们可能想要在data中直接定义html代码，如下所⽰：
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
message: "<span>0085</span>"
}
}
})
</script>
</body>
</html>
但是此时浏览器页⾯中会输出 <span>0085</span>，⽽不是 0085。这是因为双⼤括号会将数据解释为普通⽂本，⽽⾮ HTML 代码。
如果想要输出真正的 HTML，则需要⽤到 v-html 指令，如下所⽰：
<body>
<div id="app">
<p>{{ message }}</p>
<p v-html="message"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
message: "<span>0085</span>"
}
}
})
</script>
</body>
需要注意的是，动态渲染的任意 HTML 可能会存在安全隐患，因为它很容易导致 XSS攻击。请只对可信内容使⽤ HTML 插值，绝不要对⽤户提供的内容使⽤插值。
v-bind指令的使⽤
我们可以通过v-bind指令将data⾥⾯的数据绑定到元素的属性上。v-bind可以绑定html元素中的各种属性，例如id、class、style、href等等。
⽰例：
使⽤v-bind指令绑定属性，最常见的就是id，我们⼀起来看⼀下：
<body>
<div id="app">
<p v-bind:id="id">将id绑定到元素属性上</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
id: 'oldId'
}
}
})
</script>
</body>
在浏览器页⾯中可以看到如下图所⽰内容：
我们还可以通过在methods⽅法中定义函数来修改id的值：
<body>
<div id="app">
<div v-bind:id="id">
<button v-on:click="changeId">changeId</button>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
id: 'oldId'
}
},
methods:{
changeId:function(){
this.id = 'newId';
}
}
})
</script>
</body>
上述代码中，我们给html中的按钮绑定了⼀个changeId函数，在这个函数中修改了id属性的值。
使⽤ JavaScript 表达式
在Vue.js中我们可以在模板中绑定简单的属性键值，⽽对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式⽀持。例如下⾯这些表达式在所属 Vue 实例的数据作⽤域下作为 JavaScript 被解析：
{{ count + 1 }}
{{ ok ? 'YES' : 'NO' }}
<div v-bind:id="'list-' + id"></div>
但是这有⼀个限制，就是每个绑定都只能包含单个表达式，否则不会⽣效。
v-model 指令
在 html中的input 输⼊框中，我们可以使⽤ v-model 指令来实现双向数据绑定。它本质上是⼀个语法糖。
⽰例：
如下所⽰，是⼀个双向数据绑定的⼩例⼦：
除了input以外，v-model指令还可以⽤来在 select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，⾃动更新绑定的元素的值。
v-on指令
v-on指令可⽤来绑定事件，⽤在普通元素上时，只能监听原⽣DOM事件，⽤在⾃定义元素组件上时，也可以监听⼦组件触发的⾃定义事件。
在监听原⽣ DOM 事件时，⽅法以事件为唯⼀的参数。下⾯是⼀些常⽤的语法：
<!-- ⽅法处理器 -->
<button v-on:click="func"></button>
<!-- 缩写 -->
<button @click="func"></button>
<!-- 内联语句 -->
<button v-on:click="func('hello', $event)"></button>
<!-- 停⽌冒泡 -->
<button @click.stop="func"></button>
<!-- 阻⽌默认⾏为 -->
<button @click.prevent="func"></button>
<!-- 点击回调只会触发⼀次 -->
<button ="func"></button>
⽰例：
<body>
<div id="app">
<button v-on:click="fun_btn">点击事件</button>
</div>
<script>
var app = new Vue({
el:"#app",
// methods⽤于存放vue的处理⽅法的
methods:{
fun_btn(){
alert("点击事件");
}
}
})
</script>
</body>
在浏览器中演⽰，当点击按钮时，会弹出⼀个弹出层。
指令的参数
某些指定名称之后⽤冒号表⽰的就是它的参数，例如v-bind:id，其中的 id 就是 v-bind指令所接收的参数。
⽰例：
例如下⾯这段代码中，href就是指令的参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
<body>
<div id="app">
<a v-bind:href="url">herf是参数</a>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
url: 'www.9xkd/'
}
}
})
</script>
</body>
在浏览器中的显⽰：
指令的缩写形式
Vue.js 为两个最为常⽤的指令提供了特别的缩写，即v-bind和v-on指令。
v-bind指令的缩写形式如下所⽰：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on指令的缩写形式如下所⽰：
<!-- 完整语法 -->
<a v-on:click="on"></a>
<!-- 缩写 -->
<a @click="on"></a>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。