Vue3全家桶(学习笔记)

落雨既然

已于 2023-08-03 16:43:07 修改

阅读量90

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

于 2023-08-03 16:39:46 首次发布

本文链接：https://blog.csdn.net/m0_73865822/article/details/132086938

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Vue3的基本语法，包括HelloWorld示例、数据驱动的反转和隐藏、TodoList、组件概念、生命周期函数、模板语法、数据与方法处理、组件复用、样式绑定、条件渲染、事件绑定以及组件的定义和使用。

摘要由CSDN通过智能技术生成

Vue3(未更完)

1.vue语法初探

1.1 HelloWord

    <body>
    <div id="root"></div>
    <script>
    // 从面向dom编程到面向数据编程
    Vue.createApp({
    data(){
    return {
    content: 1
    }
    },
    // 当页面加载完成,会自动调用mounted
    mounted() {
    setInterval( ()=>{
    this.content++
    },1000)
    },
    template: `<div>{{content}}</div>`
    }).mount('#root')
    </script> 
    </body>

这里要引用<script src="https://unpkg.com/vue@next"></script>

要慢慢将思维由面向dom到面向数据

1.2 反转和隐藏

    <div id="root"></div>
    <script>
    // 从面向dom编程到面向数据编程
    Vue.createApp({
    data(){
    return {
    content: 'helloworld'
    }
    },
    methods:{
    handClick(){
    this.content  = this.content.split('').reverse().join('')
    }
    },
    // 绑定反转函数,实习写在methods里面
    template: `
    <div>{{content}}</div>
    <button @click = "handClick">反转</button>
    ` 
    }).mount('#root')
    </script> 
	</body>

    <body>
    <div id="root"></div>
    <script>
    // 从面向dom编程到面向数据编程
    Vue.createApp({
    data(){
    return {
    show: true
    }
    },
    methods:{
    handClick(){
    // 面向数据编程,改变数据的值
    this.show = !this.show
    }
    },
    template: `
    <span v-if = "show">hello</span>
    <button @click = "handClick">隐藏/出现</button>
    ` 
    }).mount('#root')
    </script> 
    </body>

1.3 todolist

    <body>
    <div id="root"></div>
    <script>
    // 从面向dom编程到面向数据编程
    Vue.createApp({
    data(){
    return {
    list: [],
    inputValue: ''
    }
    },
    methods:{
    handClick(){
    this.list.push(this.inputValue)
        inputValue = ''
    }
    },
    template: `
    <input v-model = "inputValue">
    <button @click = "handClick">增加</button>
    <ul>
    <li v-for = "(item,index) of list">{{item}} {{index}}</li>
    </ul>
    ` 
    }).mount('#root')
    </script> 
    </body>

index ,是item遍历的索引

<button @click = "handClick" title = "222">增加</button>

这样不对,如果title要和数据绑定,需要使用v-bind指令 :title=

1,4 组件概念初探

如果.mount('#root')挂载了组件之后再去qpp.component()去创建组件就来不及了

展示组件:定义完组件之后再去挂载app.mount('#root')

    <div id="root"></div>
    <script>
    // 从面向dom编程到面向数据编程
    const app = Vue.createApp({
    data(){
    return {
    list: [],
    inputValue: ''
    }
    },
    methods:{
    handClick(){
    this.list.push(this.inputValue)
    }
    },
    template: `
    <input v-model = "inputValue">
    <button @click = "handClick">增加</button>
    <ul>
    <todo-item v-for = "(item, index) of list"
    :content = "item"
    :index = "index"
    ></todo-item>
    </ul>
    ` 
    });
    app.component('todo-item', {
    props: ['content', 'index'],
    template: '<div>{{content}}----{{index}}</div>'
    })
    app.mount('#root')
    </script> 
    </body>

在这里,将li标签的属性通过组件化展示出来,:index :content分别绑定两个变量, 在组件中,由props:[绑定值1,绑定值2...]去接收

2. Vue基础语法

2.1 基础概念

获取数据要用vm.$data.xxx

createApp 表示创建一个Vue应用, 存储到app变量中, 传入的参数表示,这个应用最外层的组件应该如何展示

mvvm模式, m->model 数据 v->view 视图 vm -> viewModel视图数据连接层

这也是为什么 const vm = app.mount(‘#root’) vm代表的就是Vue的根组件

2.2 生命周期函数

在某一时刻会自动执行的函数

比如之前的 mounted(){}

图里面的判断意思是. 如果没有template 就去root挂载的根节点去找innerHtml结构

beforeUpdate是在数据改变(页面还没有渲染时调用)

updated是在页面重新渲染完之后调用,注意二者区别!

beforeUnmount当Vue应用失效时,自动执行的函数

unmounted 当Vue应用失效时,且dom完全销毁之后,自动执行的函数

2.3 常用模版语法

template: <div v-html = "message"</div>

避免转义

v-bind:(属性或变量) = … 与data中的数据绑定 , 不知道起什么名可以**:[data中的属性名]**

template: <div v-html = "message">{{在这里面可以写类似于Max(,)这样的js表达式}}</div> 但是如果是if(){}就不行,这是js语句,不是表达式

<div v-once>{{m}}</div> 只显示一次,当m再变化,页面渲染

v-if = 'show' show是data:{} 中的bool

v-on 点击绑定

@[event] , 而event可以在data中 event: ‘click’ /‘ mouseenter’ 绑定其他事件

阻止默认行为 @click.prevent = “函数名”

2.4 数据,方法,计算属性,侦听器

   methods:{
     formatString(string){
       return string.toUpperCase();
     }
   },
   template: `<div>{{formatString(message)}}</div>`
 }).mount('#root')

 <script>
   const vm = Vue.createApp({
     data(){
       return {
         message: 'hello world',
         count: 2,
         price: 5
       }
     },
     computed:{
       // 当计算属性依赖的内容发生改变,才会重新执行计算
       total(){
         // 注意计算属性别漏了this
         // return this.count * this.price; 
       }
     },
     methods:{
       formatString(string){
         return string.toUpperCase();
       },
       // 只要页面重新渲染,就会重新计算
       
         Date.now();
         // return this.count * this.price; 
       }
     },
     template: `<div>{{total}}</div>`
   }).mount('#root')
 </script>

total()(在computed中)

/当计算属性依赖的内容发生改变,才会重新执行计算
getTotal()(在函数方法中)

只要页面重新渲染,就会重新计算

侦听器

如果想数据改变隔五秒打印一些东西,用computed肯定是不行的,这是后就需要加一个watch侦听器

<script>
  const vm = Vue.createApp({
    data(){
      return {
        message: 'hello world',
        count: 2,
        price: 5
      }
    },
    computed:{
      // 当计算属性依赖的内容发生改变,才会重新执行计算
      total(){
        // 注意计算属性别漏了this
         return this.count * this.price; 
      }
    },
    watch: {
      price(){
        setTimeout(() => {
          console.log('price changed')
        },3000)
      }
    },
    methods:{
      formatString(string){
        return string.toUpperCase();
      },
      // 只要页面重新渲染,就会重新计算
      getTotal(){
        Date.now();
        // return this.count * this.price; 
      }
    },
    template: `<div>{{total}}</div>`
  }).mount('#root')

computed 和 method 都能实现的一个功能,建议使用computed,因为有缓存, computed 和 watcher 都能实现的功能,建议使用computed,因为更加简洁. watched 也可以监听price改变,然后对页面重新与安然,但是麻烦,不如computed

异步可以在watch 里面, 但同步不如在computed里面更简洁

2.5.样式绑定语法

 <script>
   const app = Vue.createApp({
     data(){
       return{
         classString: 'red'
       }
     },
     template: `<div :class = 'classString'> hello</div>`
   })
   const vm =  app.mount('#root')

通过字符串绑定来改变style样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LCF6CQqd-1691051902984)(…/imgs/image-20230802133154875.png)]

添加子组件

<script>
  const app = Vue.createApp({
    data(){
      return{
        classString: 'red'
      }
    },
    template: `<div :class = 'classString'> hello
      <demo />
      </div>`
  })
  // 创建组件
  app.component('demo', {
    template: ' <div class = "green" > single </div>'
  })
  const vm =  app.mount('#root')
</script>

如果子组件有两个div. 当把class加到父组件demo中时,可以控制显示哪个div:

通过style的方式写样式:

这里简写写styleObject 可读性更强

2.6 条件渲染

 <script>
   const app = Vue.createApp({
     data(){
       return{
         show : false
       }
     },
     template: `
       <div v-if = 'show'> hello</div>
       <div v-show = 'show'> hello</div>
     `
   });
   const vm =  app.mount('#root')
 </script>

v-if 是直接在DOM上添加或者删除,而v-show值通过冬至display:none属性来控制是否显示

如果频繁改变的话还是建议使用v-show

除此之外,在vue中还可以使用if else if else逻辑

表示如果conditionOne 是True的话就展示if,如果不是,就看conditionTwo是true的话就显示else if, 否则就展示else

2.7 列表渲染

基础

可以对list 循环,也可以对对象循环:

这里的value 代表对应的变量值, key代表firstname这些等等

index是索引, 从0开始往后一次增加

循环的时候尽量使用key值,避免重复渲染带来的性能问题

操作数组

实现页面的添加和删除

pop索引大的开始删,shift从小的开始删除,unshift会忘头部(索引开头)添加东西

reverse可以变更顺序

2-直接替换数组

操作对象

在老版本的vue中出直接修改对象里面的内容可能会有一定的问题

这个是实现不展示lastName,但是要注意 循环和判断不要写在一个标签上,循环的优先级会更高,如果要筛序性展示,则新创建一个div标签,来选择是否展示

为了避免每一层多一个div标签

这列template 知识占位符,并不会影响渲染效果

2.8 事件绑定

基础

如果要传参,且还要原生的event事件,就可以在event前面加一个$传递过去

如果要使用多个函数,就不能只写函数名了,要加上括号

事件修饰符

stop:避免冒泡

@click.stop = "方法"

.self 只有点自己才会执行,点子标签里面的其他元素则不会执行

.prevent组织默认行为

.capture 捕获

once 只执行一次,再点击就不会执行

@scroll.passive

按键修饰符

exact是只按ctrl这个键再点击执行的,精确执行

双向绑定

v-model

输入框的值变,页面渲染的值跟着改变

textarea

checkbox:

false跟着点击变成true再变回来

自定义值取代false True

多个checkbox会往数组里面存Value

radio

是单选,不能都放到数组中

初始值要变成字符串,选谁变成谁

select

加上multiple变成多选

最终存储会将value里面的对象作为存储的值

帮助我吗做项目临时转化

表单中双向绑定的使用

lazy

当失去焦点的时候渲染页面展示的值,跟v-model不一样的地方在于不实时渲染

输入内容的时候由String变成number

trim

只去除字符串前后字符,中间的不会去除

3.探索组件的概念

3.1 组件的定义及复用性

<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      template: `<div><hello /><world /></div>`,
    })
    app.component('hello', {
      template: `<div>hello</div>`
    })
    app.component('world', {
    template: `<div>world</div>`
    })    

    const vm =  app.mount('#root')
  </script> 
</body>

组件可以被复用,但不会和其他组件共享

独享

app.component定义的组件是全局的,不仅在父组件可以用,在其他的组件里也可以用,

就算不用组件,但仍会挂载到app上,影响性能,使用简单

3.2 局部组件

<body>
  <div id="root"></div>
  <script>

  const hello = {
    template: `<div>hello</div>`
  }
  const counter = {
   data(){
     return{
       count: 1
     }
   },
   template:   `<div @click = "count += 1">{{count}}</div>`
 }
    const app = Vue.createApp({
      components: {'counter': counter,
                  'hello':hello
                   },  // counter ES6
      template: `<div><counter /><hello /></div>`,
    })

    const vm = app.mount('#root')

  </script> 
</body>

全局组件建议小写字母单词,中间横线连接

一般将局部组件首字母大写,驼峰命名法: HelloWorld;