Vue学习笔记
Posted 保护眼睛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习笔记相关的知识，希望对你有一定的参考价值。
Vue学习笔记
使用 v-html 指令用于输出 html 代码
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue(
el: '#app',
data:
message: '<h1>hello vue!</h1>'
)
</script>
HTML 属性中的值使用 v-bind 指令。
以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<style>
.class1
background-color: yellow;
</style>
<div id="app1" style="text-align: center">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="'class1': use">
v-bind:class 指令
</div>
</div>
<script>
new Vue(
el: '#app1',
data:
use: true
);
</script>
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
<div id="app2">
<p v-if="seen" style="background-color: orange;text-align: center" >现在你看到我了</p>
</div>
<script>
new Vue(
el: '#app2',
data:
seen: false
)
</script>
false
true
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
<div id="app3">
<pre class="class1" ><a v-bind:href="url" >响应的url</a></pre>
</div>
<script>
new Vue(
el: '#app',
data:
url: 'http://www.hello.com'
)
</script>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
v-model 指令来实现双向数据绑定
数据模型和视图之间的双向绑定。 当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化；可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。 双向数据绑定的优点：无需和单向数据绑定那样进行CRUD（Create，Retrieve，Update，Delete）操作，双向数据绑定最常应用在就表单上，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户输入好的数据，并放到数据模型中了。
<div id="app4" class="class1">
<p> message </p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue(
el: '#app4',
data:
message: 'hello!'
,
methods:
reverseMessage: function ()
this.message = this.message.split('').reverse().join('')
)
</script>
以上是关于Vue学习笔记的主要内容，如果未能解决你的问题，请参考以下文章