前言：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>
