《Vue3实战》篇章整体栏目
—————————————————————————————
【第一章】node.js/npm安装、配置
【第二章】创建项目和目录结构
【第三章】基础语法
【第四章】条件语句、循环语句
【第五章】计算、监听属性
【第六章】样式绑定和事件处理
【第七章】表单
【第八章】自定义指令
【第九章】路由
【第十章】Element plus指南
【第十一章】Vue3实战之打造新闻系统前端模板
—————————————————————————————

—————————————————————————————

前言：Vue基础语法、模板语法

1、hello world

1.1、App.vue 中改造模板

<template><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="hello vue!"/>
</template>

1.2、改造HelloWorld.vue组件

<template><div class="hello"><h1>{{ msg }}</h1>    </div>
</template>

以上是组件传递参数msg（{{ }} 用于输出对象属性和函数返回值）

<script>
export default {name: 'HelloWorld',props: {msg: String}
}

data()函数传递参数（data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数）

<script>
export default {name: 'HelloWorld',props: {msg: String},data(){return {message : "zhangsan"}}
}

1.3、通过方法 改变data定义的值

在HelloWorld.vue中定义方法changeHello()

<template><div class="hello"><h1>{{ msg }}</h1>    <h1>{{message}} </h1><h1>{{hello}}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data(){return {message : "Tiger",hello : "Hello Tiger"}},methods:{changeHello(){this.hello = "Hello Vue"}}
}

在App.vue中定义ref

<HelloWorld msg="hello vue!" ref="hello_world"/>

Vue代码中加mounted方法

export default {name: 'App',components: {HelloWorld},mounted(){this.$refs.hello_world.changeHello();}  
}

2、模板语法

2.1、插值-文本

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值

{{msg}}

2.2、插值-Html

使用 v-html 指令用于输出 html 代码

<h1 v-html="rawHtml"></h1>
data(){return {message : "Tiger",hello : "Hello Tiger",rawHtml : '<font color="red">Hello，张三</font>'}}

2.3、插值-属性

HTML 属性中的值应使用 v-bind 指令

<h1> <input type="text" v-model="displayDiv" id="displayDiv"></h1><div v-bind:style="{'display': displayDiv}">今天天空很蓝</div>
data(){return {message : "Tiger",hello : "Hello Tiger",rawHtml : '<font color="red">张三</font>',displayDiv : 'block'}}

2.4、插值-表达式

<h1>{{8*8}}<br/>{{flag ? "pass":"not pass"}}<br/>{{train.split('').reverse().join('')}}<br/><div v-bind:id="'seeyou-' + id"/></h1>
data(){return {message : "Tiger",hello : "Hello Tiger",rawHtml : '<font color="red">张三</font>',displayDiv : 'block',flag: true,train: 'I am a student',id: 2}}

2.5、插值-指令

指令是带有 v- 前缀的特殊属性。

<h1><p v-if="seen">今天是星期四，疯狂起来吧</p></h1>
data(){return {message : "Tiger",hello : "Hello Tiger",rawHtml : '<font color="red">张三</font>',displayDiv : 'block',flag: true,train: 'I am a student',id: 2,seen : true}}

<h1><ol><li v-for="(course,index) in courses" :key="index">{{course.courceName}}</li></ol>    </h1>
data(){return {message : "Tiger",hello : "Hello Tiger",rawHtml : '<font color="red">张三</font>',displayDiv : 'block',flag: true,train: 'I am a student',id: 2,seen : true,courses:[{courceName : 'Java'},{courceName : '爬虫'},{courceName : '大数据'}]}}

2.6、插值-参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性

<h1><a v-bind:href="url">百度</a></h1>
data(){return {message : "Tiger",hello : "Hello Tiger",rawHtml : '<font color="red">百度科技</font>',displayDiv : 'block',flag: true,train: 'I am a student',id: 2,seen : true,courses:[{sourceName : '语文'},{sourceName : '数学'},{sourceName : '英语'}],url: 'http://www.baidu.com'}}

2.7、用户输入

<h1><p>{{ bindValue }}</p><input v-model="bindValue"></h1>
data(){return {message : "Tiger",hello : "Hello Tiger",rawHtml : '<font color="red">华清远见</font>',displayDiv : 'block',flag: true,train: 'I am a student',id: 2,seen : true,courses:[{sourceName : '语文'},{sourceName : '数学'},{sourceName : '英语'}],url: 'http://www.baidu.com',bindValue: 'you are me'}}

2.8、缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a><!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>