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

川长思鸟来 2023-09-26 20:46 159阅读 0赞

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

#### 目录 ####

*  前言：Vue基础语法、模板语法
 *  1、hello world
 *   *  1.1、App.vue 中改造模板
     *  1.2、改造HelloWorld.vue组件
     *  1.3、通过方法 改变data定义的值
 *  2、模板语法
 *   *  2.1、插值-文本
     *  2.2、插值-Html
     *  2.3、插值-属性
     *  2.4、插值-表达式
     *  2.5、插值-指令
     *  2.6、插值-参数
     *  2.7、用户输入
     *  2.8、缩写

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

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

## 1、hello world ##

### 1.1、App.vue 中改造模板 ###

### 1.2、改造HelloWorld.vue组件 ###

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

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

### 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

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>

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081