vue系列=模板语法

1、插值语法

用双大括号包含一个JavaScript表达式，即{{JavaScript表达式}}

1、一般只是用变量，三元表达式，其他的基本很少用

<template><h2>模板语法</h2><p>{{ message }}</p><p>{{ ok? 'YES' : 'NO' }}</p>
</template><script >export default {data() {return {message: 'Hello Vue 3.0',ok: false}}}
</script>

2、指令语法

1、指令(Directive)是带有“v-”前缀的Vue自定义标签属性，其属性值一般是一个JavaScript表达式。Vue中包含了一些不同功能的指令，比如v-bind用来给标签指定动态属性值，v-on用来给标签绑定事件监听，v-if和v-show用来控制标签是否显示。但需要注意的是，不管是什么功能的指令，它们操作的目标都是指令属性所在的标签

2、● v-bind：属性名="JavaScript表达式"。● v-on：事件名="方法名表达式"。

3、其实Vue允许将“v-bind：属性名”简化为“​：属性名”​，​“v-on：事件名”简化为“＠事件名”的形式，并且在实际项目开发中，前端工程师基本上会使用简化的语法进行开发。

<template><h2>指令语法</h2><p v-text="message"></p><p>{{ message }}</p><button v-on:click="changeMessage">Change Message</button><a v-bind:href="href">Go to Google</a><!--简化语法--><p></p><button @click="changeMessage">Change Message</button><a :href="href">Go to Google</a><p v-if="ok">This is OK</p></template><script >export default {data() {return {message: 'Hello Vue 3.0',href: "https://nodejs.org/zh-cn"}},//模板中创建的方法，通过变量调用methods: {changeMessage() {this.message = 'Hello Vue 3.0 changed'}}}
</script>