文章目录
- vue插值
- vue指令
vue插值
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app" ><h3>插值</h3><p>{{ message }}</p>v-model 指令实现表单输入和应用状态之间的双向绑定：<input v-model="message"><br/>用 v-on 指令添加一个事件监听器：<button v-on:click="reverseMessage">反转消息</button><hr/>文本：<span v-once>使用了v-noce指令，将不会改变: {{ msg }}</span><hr/>原始HTML：<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p><hr/>Attribute：<div v-bind:id="dynamicId"></div><button v-bind:disabled="isButtonDisabled">Button</button><hr/>使用JavaScript表达式：{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}</div><script>var vm = new Vue({el: '#app',data: {message: 'Hello Vue2!',msg: "hi vue",rawHtml: '<span style="color:red">This should be red.</span>',dynamicId: 'dId',isButtonDisabled: true, number: 5,ok: true,},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}});vm.msg = "hi......";</script></body>
</html>
效果：
vue指令
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app" ><h3>指令</h3><p v-if="seen">现在看到我了</p><a v-bind:href="url">...</a><hr/><a :href="url">v-bind缩写</a><hr/><a v-on:click="doSomething">{{message}}</a><hr/><a @click="doSomething">{{message}}v-on缩写</a></div><script>var vm = new Vue({el: '#app',data: {message: 'hello Vue',seen: true,url: 'https://www.baidu.com',},methods: {doSomething: function(){this.message = this.message.split('').reverse().join('')}} });</script></body>
</html>
效果：
