《Vue3实战》 第三章 基础语法

《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 : 'Hello，张三'
    }
  }

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 : '张三',
      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 : '张三',
      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 : '张三',
      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 : '张三',
      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 : '百度科技',
      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 : '华清远见',
      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>