{{}}的显示问题未解决，阅读时注意去掉{}前的\ ！！！！！！！！！！
Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
使用{{……}}的文本插值进行数据绑定
<div id="app1">
\{\{ message \}\}
</div>
使用v-html指令用于输出html代码
<div id="app1">
<div v-html="template"></div>
</div>
<script>
var app = new Vue({
el: '#app1',
data: {
template: "<div>Hello, Template!</div>"
}
})
</script>
html 属性中的值应使用 v-bind 指令。
v-bind在使用中也可以进行缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
Vue提供了完全的JavaScript 表达式支持。
<div id="app">
\{\{5+5\}\}<br>
\{\{ ok ? 'YES' : 'NO' \}\}<br>
<!--反转字符串-->
\{\{ message.split('').reverse().join('') \}\}
<div v-bind:id="'list-' + id">学习Vue</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'VUE',
id : 1
}
})
</script>
运行结果：
10
YES
EUV
学习Vue
关于字符串反转
split(‘’) 是分裂的意思，也就是把一个数据拆分。
var vm = new Vue({
date:{
message=" Not split "
}
)}
message.split('') == [ "N", "o", "t", " ", "s", "p", "l", "i", "t" ]
split(‘’) 会把数据拆分为一个数组，括号里的 ' ' 是把数据拆分为每个字符串的意思，如果不用就不会拆分成每个字符串。
reverse() 是翻转的意思，把数据反过来。
message.reverse() == Not split // 无效，因为只能对数组起作用
所以要跟在 split(‘’) 后使用。
join(‘’) 是重组的意思，把数组合成一个字符串。
message.split('').join('')
slpit 后会拆散会数组，join 后就会变回原来的字符串了。
所以我们要把数据反过来重组就可以用：
message.split('').reverse( ).join('')
指令
指令是带有v-前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到DOM上。
<!--
v-if指令根据表达式seen的值（true或false）来决定是否插入p元素
-->
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
参数
参数在指令后以冒号指明。
v-bind指令被用来响应地更新HTML的值。
<div id="app">
<!--这里href是参数，告知v-bind指令该元素的href与表达式url的值绑定-->
<pre><a v-bind:href="url">我的博客</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://hkaren78.github.io/'
<!--给元素绑定href时可以也绑一个target，新窗口打开页面。-->
target:'_blank'
}
})
</script>
v-on指令用于监听DOM事件
<!--这里的参数是监听的事件名-->
<a v-on:click="doSomething">
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
实现两个加一和减一的按钮。
<div id="app1">
<p> \{\{ count \}\}
<button type="button" v-on:click="addOne()">加1</button>
<button type="button" @click="minusOne()">减1</button>
</p>
</div>
<script>
var app = new Vue({
el: '#app1',
data: {
count: 1,
},
methods: {
addOne: function() {
this.count++ // this 在此处代表 Vue 对象
},
minusOne: function() {
this.count--
}
}
})
</script>
修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
用户输入
在 input 输入框中，可以使用 v-model 指令来实现双向数据绑定：
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<!--双向数据绑定-->
<div id="app">
<p>\{\{ message \}\}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Vue!'
}
})
</script>
过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由”管道符”指示, 格式如下：
<!-- 在两个大括号中 -->
\{\{ message | capitalize \}\}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
<!--对输入的字符串的第一个字母转为大写-->
<div id="app">
\{\{ message | capitalize \}\}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'learn'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
过滤器串联
\{\{ message | filterA | filterB \}\}
过滤器是 JavaScript 函数，因此可以接受参数：
<!--message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。-->
\{\{ message | filterA('arg1', arg2) \}\}
综合实例
<!DOCTYPE html>
<!--
Vue basic: 基本语法 v-on及简写@, v-bind及简写:, template
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app1">
\{\{ msg \}\}
<!--使用v-html指令用于输出html代码-->
<div v-html="template"></div>
<!--给元素绑定href时可以也绑一个target，新窗口打开页面。-->
<a v-bind:href="url" v-bind:target="target">我的博客</a>
<a :href="url1">百度</a>
<p> 8
<button type="button" v-on:click="addOne()">加1</button>
<button type="button" @click="minusOne()">减1</button>
</p>
<!--用户输入的双向绑定与字符串反转-->
<input type = "text" v-model = 'message'>
<p>请输入原始字符串: \{\{ message \}\}</p>
<button @click = "stringReverse">点我反转字符串</button>
<p>计算后反转字符串: \{\{ newMessage \}\}</p>
<button @click = "clear">点我清空</button>
</div>
<script>
var app = new Vue({
el: '#app1',
data: {
url: "https://hkaren78.github.io/",
<!--新窗口打开超链接-->
target:'_blank',
url1: "http://www.baidu.com",
msg: "Hello, Vue!",
count: 1,
template: "<div>Hello, Template!</div>",
message: '',
newMessage: ''
},
methods: {
addOne: function() {
this.count++ // this 在此处代表 Vue 对象
},
minusOne: function() {
this.count--
},
// 计算属性的 getter
stringReverse:function(){
// `this` 指向 vm 实例
this.newMessage = this.message.split('').reverse().join('');
},
clear:function(){
this.message = '';
this.newMessage = '';
}
}
})
</script>
</body>
</html>
