vue中的声明式渲染和数据响应式

一.声明式渲染

1.Vue中的Hello Word程序

1.1CDN引入vue.js

javascript 复制代码

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

1.2准备容器

javascript 复制代码

<div id='app'>


</div>

1.3创建应用

javascript 复制代码

<script>
  const{createApp}=Vue
  createApp({
    setup(props) {
      const mes="Hello Word!"
      return {
        mes
      }
    }
  }).mount('#id')

1.4渲染数据

javascript 复制代码

<div id="id">
  <h3>{{mes}}</h3>
</div>

2.setup函数

2.1介绍

setup函数vue3API的入口函数

setup函数式vue3特有的选项，作为编写代码的起点
标签中用到的数据或函数，需要在setup中声明并返回
函数中this不是Vue实例，setup中是不会用到this的

2.2总结

setup函数的作用

答：是vue3代码的入口/七点、后续cue3逻辑代码都是在这里编写的

3.插值表达式

3.1作用

把表达式的结果展示在双标签中

3.2语法

{{表达式}}，表达式：凡是有结果的操作/运算，常见的表达式有：

所有的字面量
对象.属性名
算数运算或三元运算
方法的调用语句

3.3代码实例

javascript 复制代码

<div id="app">
  <!-- 1.直接放变量 -->
   <h1>{{mes}}</h1>
   <!-- 2.对象属性 -->
    <p>我叫{{obj.name}},今年{{obj.age}}岁了</p>
    <!-- 3.三元表达式 -->
     <p>{{obj.age>18?'成年':'未成年'}}</p>
     <!-- 4函数的调用 -->
      <p>fn的返回值是:{{fn()}}</p>
      <!-- 5.算数运算 -->
       <p>来年我{{obj.age+1}}岁了</p>
       <!-- 6.方法的调用 -->
        <p>{{mes}}中有{{mes.split(' ').length}}个单词</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
   const { createApp } = Vue

  createApp({
    setup(props) {
      //字符串
      const mes = "Hello World!"
      //对象
      const obj = {
        name: "小vue",
        age: 9
      }
      //函数
      function fn(){
        return 100
      }
      //返回
      return {
        mes,
        obj,
        fn
      }
    }
  }).mount('#app')
</script>

3.4总结

1.1什么是插值表达式？

答：{{表达式}}，把表达式的结果展示在双标签中

1.2vue3的初始数据在哪声明？、

答：setup函数中定义并返回初始数据

二.数据响应式

1.啥么是数据响应式

简单的说：就是数据变了，试图跟着变

2.响应式函数reactive

2.1使用步骤

从vue中解构出来reactive函数
在setup函数中，使用reactive函数，传入一个普通对象，返回的是一个响应式对象
最后setup函数返回一个响应式对象，供模板使用

注意:reactive接受的参数是对象

2.2代码实例

javascript 复制代码

<div id="id">
  <p>我叫{{obj.name}},今年{{obj.age}}岁了</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const{createApp,reactive}=Vue
  createApp({
    setup(props) {
     const obj= reactive({
      name:"小vue",
      age:9
      })
      return {
        obj
      }
    }
  }).mount('#id')
</script>

2.3总结

1.reactive函数的作用是？

答：让一个对象具备响应式。

2.reactive函数能转换简单类型吗？

答：不能、reactive的参数只能是对象类型

3.响应式函数ref

3.1使用步骤

从vue中解构出ref函数
给ref传入指定类型的数据，得到一个响应式数据

注意：操作ref创建的数据，js中需要.value，标签中不.value

3.2代码实例

javascript 复制代码

<div id="id">
  <p>{{msg}}</p>
  <p>我叫{{obj.name}},今年{{obj.age}}岁了</p>
  <button @click="onClick">修改ref数据</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const{createApp,ref}=Vue
  createApp({
    setup(props) {
      //ref定义一个响应式字符串
      const msg=ref("Hello Word!")
      //ref定义一个响应式对象
      const obj=ref({
        name:"小Vue",
        age:9
      }
    )
    //点击事件
      const onClick=()=>{
        msg.value='你好,vue3'

        obj.value.name='Vue3'
        obj.value.age=10
    }
    return {
      msg,
      obj,
      onClick
    }
  }
  }).mount('#id')
</script>

3.3总结

ref函数的作用是?

答：1.把简单数据或复杂数据转化成响应式数据 2.注意：js中操作要.value，模板中可不用.value

4.reactive与ref的选择

如果数据是对象、并且字段的名称也确定,推荐使用reactive赋予数据响应式，其他的一律使用ref