<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 插值表达式将data的值取出放到html中渲染-->
<div>{{ msg }}</div>
<!-- 插值表达式支持数据的运算-->
<div>{{ 6 + 1 }}</div>
<!-- 给v-cloak设置一个样式,防止闪烁时跳出源码-->
<div v-cloak>{{ msg }}</div>
<!-- v-text可以直接将data的文本值取出放到html中渲染,v-text支持运算-->
<!-- v-text会覆盖原先有的html内容-->
<!-- v-text 和 v-html 的区别-->
<!-- v-text输出的是纯文本，浏览器不会对其再进行html解析-->
<!-- v-html会将其当html标签解析后输出-->
<div v-text="msg"></div>
<!-- v-html可以直接渲染data中的html,这可能会导致xss攻击-->
<div v-html="html"></div>
<!-- v-pre 将原始内容显示,不进行编译,可提高效率-->
<!-- 显示原始信息跳过编译过程-->
<!-- 一些静态的内容不需要编译加这个指令可以加快渲染-->
<div v-pre>{{666}}</div>
<!-- v-once只进行一次编译后面数据发生改变时不会再变动,取消数据响应式-->
<!-- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】-->
<div v-once>{{msg}}</div>
<!-- v-model是一个可以实现数据的双向绑定的指令,限制在 <input>、<select>、<textarea>、components（组件） 中使用-->
<!-- 双向绑定 当数据发生变化的时候，视图也就发生变化 当视图发生变化的时候，数据也会跟着同步变化-->
<div v-model>{{msg}}</div>
<!-- v-on:[事件名]实现事件绑定, 绑定的事件为实例的vue对象中的methods里面的属性-->
<button v-on:click="test">1</button>
<!-- v-on:可以简写成@-->
<button @click="test">2</button>
<button @click="test2(666)">3</button>
<!-- test和test2(666)的区别-->
<!-- 如何直接写成方法名,默认是代用该方法,且默认传递一个参数`$event`,-->
<!-- 写成括号形式的可以传递多个参数,方便灵活调用,若无参数,则可以写成函数名形式-->
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
"msg": "hello world",
"html": " <h1>hello</h1>"
},
methods: {
test: function () {
this.msg = "666"
},
test2: function (data) {
console.log(data)
}
}
})
</script>
</html>Vue的基本指令的使用1
猜你喜欢
转载自www.cnblogs.com/ivy-blogs/p/12164299.html
今日推荐
周排行