Vue3的学习和使用（一）

1.声明式渲染

比如先建立一个模板：提高开发效率

//声明式渲染

export default{//默认导出
  data(){
    return{
      num:0,
      uname:"张三" 
    }
  }
}

</script>

<template> <div> <p>{{ num }}</p> <p>{{ uname }}</p> </div> </template>

2.应用&组件

1.创建一个组件实例

2.根组件

 

APP.vue为根组件。

组件实例property

3.模板语法

1.插值

文本

数据绑定最常见的形式就是使用双大括号

<span>Message:{{msg}}</span>

v-once指令，当数据改变时，插值处的内容不会改变。

​<p v-once>{{ uname }}</p>

​

原始HTML(让内容以HTML的形式来使用)

v-html指令：<p>{{ msg }}</p> <p v-html="msg"></p>

v-bind:动态的绑定属性的内容(语法糖：用冒号)

<!-- v-bind:动态的绑定属性的内容 -->

​

v-bind绑定

​

​ <button @click="changeColor">改变颜色</button>

使用简单的JavaScript表达式

<button @click="changeColor">改变颜色</button>使用定义方法 <button @click="id='d2'">改变颜色</button>使用简单的JavaScript表达式

指令：一般是单个表达式

职责：当表达式的值改变时，将其产生        的连带影响，响应式的作用于DOM.

​

<p>{{ num+1 }}</p>
<p>{{ uname.split('').reverse().join('')}}</p>

​

v-on 语法糖：@

4.计算属性和侦听器

4-1：计算属性

只要依赖值不变，那么不会重新计算

计算属性有缓存，同样的数据，被调用的时候，会读取缓存的数据，但是methods，会每次都会重新执行代码。