Vue基础笔记

最新推荐文章于 2024-06-14 20:55:18 发布
最新推荐文章于 2024-06-14 20:55:18 发布
阅读量7.4k 收藏 24
点赞数 4
分类专栏： vue基础笔记 文章标签： 前端 javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68915174/article/details/127861473
版权

创建一个Vue应用

        1.应用实例

                每个Vue应用都是通过createApp函数创建一个新的应用实例

import { createApp } from 'vue'

const app = createApp({ //根组件选项})

        2.根组件

                若使用的是单文件组件，可直接从另一个文件中导入根组件

import {createApp } from 'vue'

import App from './App.vue'

const app=createApp(App)

         3.挂载应用

                实例对象必须调用 .mount()后才能渲染出来

<div id="app"></div>

app.mount('#app')  //可以是一个实际的DOM元素或者一个CSS选择器字符串

         4.根组件模板

                <div id="app">

                        <button @click="count++">{{count}}</button>

                </div>

                import{creatApp} from 'vue'

                const app=creatApp({

                        data(){

                                return{count:0}

                        }

                })

                app.mount("#app")

 模板语法

        1.文本插值 （大括号)

                <span> Message : {{msg}} </span>      //会将数据解释为纯文本

        2.原始HTML（v-html）

                <p> Using v-html direction: <span v-html="rawHtml"> </span> </p>         //插入HTML

        3.attribute绑定（v-bind）

                双括号不能在HTML attribute中使用，要想响应式的绑定一个attribute，使用v-bind指令

                <div v-bind : id="dynamicId"><div>

                简写：<div :id="dynamicId"></div>

        v-bind指令知识Vue将元素id attribute与组件dynamicId属性保持一致，如果绑定的值为null/undefined，则attribute将会在渲染元素上移出

               （1）布尔型attribute：依据true/false来决定attribute是否应该存在该元素上

               <button :disabled="isButtonDisabled">Button</button>    

                （2）动态绑定多个值 ：通过不带参数的v-bind将一个包含多个attribute的JS对象绑定到单个元素上

                data(){

                        return{

                                ObjectOfAttrs:{

                                        id:" ",

                                        class:" "

                                }

                        }

                }

                <div v-bind="objectOfAttrs"></div>

        4.使用JavaScript表达式

                在Vue模板中，JavaScript表达式可以使用在文本插值中和任何Vue指令attribute的值中。每个绑定仅支持单一表达式，一段能够被求值的JavaScript代码（能合法的写在return后面） 

                使用调用函数：<span :title="toTitlrDate(date)">{{formateDate(date)}}</span>

        5.指令Direction

                指令是一个带有v-前缀的特殊attribute，指令attribute的期望值为一个JavaScript表达式，一个指令的任务是在其表达式的值发生变化时响应的更新DOM

        6.参数Arguments

                动态参数中表达式的值应当是一个字符串或null，null意为显示移除该绑定，其他非字符串会触发警告动态参数语法的限制。

                动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号在HTML attribute名称中不合法，在使用DOM内嵌模板时名称大写字母会强制转换为小写

        7.修饰符Modifiers

                以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定

响应式基础

        1.声明响应式状态（data）

                选用选项API时，用data选项来声明组件的响应式状态，此选项值返回一个对象函数

        export default{

                data(){

                        return{

                                count:1}

                },

                mounted(){ 

                        console.log(this.count)  //this指向当前组件实例

                        this.count=2

                }

        }

        //实力上的属性仅在实例首次创建时被添加，所以要确保出现在data函数返回的对象上，可以用null | undefined 占位，若不在data定义，直接向组件实例添加新属性，该属性无法触发响应式更新

         2.声明方法

                Vue自动给methos中的方法绑定永远指向组件实例的this（methos中的方法不能用箭头函数，因为箭头函数没有自己的上下文）

        3.DOM更新时机

                若要等待一个状态改变后的DOM更新完成，可使用nextTick()这个全局变量

                import { nextTick} from 'vue'

                export default {method:{ increment() { this.count++

                                                                              nextTick(()=>{})

                                        }}}

        4.深层响应式（Vue默认深层响应式）

                export default { data() {

                                                        return{

                                                                        obj:{ nested:{count:0},

                                                                         arr:['foo','bar']

                                                    }}},

                                          methods:{ mutateDeeply(){this.obj.nested.count++

                                                                                        this.obj.arr.push('baz') 

         5.有状态方法

                要保证每个组件实例的方法函数都彼此独立，在created生命钩子中创建方法函数

        eg:预制防抖的事件处理器的创建

        import { debounce } from 'lodash-es'

        export default{

                methods:{click:debounce(function(){

                                //对点击的响应

          }}

=>

        export default {

                created(){

                        this.debouncedClick=_.debounce(this,click,500)

                },

                unmounted(){//最好在组件卸载时清除掉防抖计时器

                        this.debouncedClick.cancel()

                },

                methods:{click(){//对点击的响应}

        }

计算基础重点

export default{
    data(){
        return{
            author:{
                name:'John',
                books:[
                    'A',
                    'B',
                    'C'
                ]
            }
        }
    },
    computed:{
        publishedBooksMessage(){
            return this.author.books.length>0?'Yes':'No'
        }
    }
}


<p>Has published books:<p>
<span<{{publishedBookMessage}}</span>

用计算属性缓存而不用方法的原因：

因为计算属性值会基于其响应式依赖被缓存，只有在其响应式依赖更新时才会重新计算，publishedBooksMessage依赖于this.author.books.length，只要author.books不发生改变，publishedBooksMessage都会立即返回先前的计算结果，但是方法调用总会在重新渲染发生时再次执行函数

可写计算属性

        getter|setter

        getter只做计算操作，避免直接修改计算属性值

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 注意：我们这里使用的是解构赋值语法
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}

Class与Style绑定

        1.绑定HTML class

        （1）内联绑定对象

                        传递一个对象来动态切换class


    data(){
        return{
            isActive:true,
            hasError:false
        }
    }

<template>
    <div class="static :class="{active:isActive,'text-danger':hasError}"></div>
</template>

                        渲染结果为：<div class="static active"></div>

        （2）直接绑定对象


        data(){
            return{
                classObject:{
                    active:true,
                    'text-danger':false
                }
            }
        }

    <template>
        <div :class=""classObject"></div>
    </template>

        （3）绑定一个返回对象的计算属性 

        data(){
            return{
                isActive:true,
                error:null
            }
        },
        computed:{
            classObject(){
                return{
                    active:this.isActive && !this.error,
                    'text-danger':this.error && this.error.type==='fatal'
                }
            }

    <template>
        <div :class=""classObject"></div>
    </template>

        （4）绑定数组 

        data() {
            return {
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        }

    <template>
        <div :class="[activeClass,errorClass]"></div>
    </template>

                渲染结果：<div class="active text-danger"></div>

                在数组中有条件的渲染某个class

                1.三元表达式

<div :class="[isActive ? activeClass : '', errorClass]"></div>

                2.数组中嵌套对象

<div :class="[{ active: isActive }, errorClass]"></div>

                只有当isActive为真时，activeClass|active才会存在

        （5）在组件上使用

//子组件
<p class="foo bar"></p>

//使用组件
<MyComponent class="baz boo" />  
//<p class="foo bar baz boo"></p>

//class绑定
<MyComponent :class="{ active: isActive }" />   
//当isActive为true时，<p class="foo bar active"></p>

//组件有多个根元素时，用组件的$attrs属性来实现指定
<p :class="$attrs.class"></p>
<span>This is a child component</span>
<MyComponent class="baz" />
/*<p class="baz"></p>
<span>This is a child component</span>*/

        2.绑定内联样式

                （1）直接绑定JavaScript对象值

        data() {
            return {
                activeColor:"red",
                fontSize:30
            }
        }

    <template>
        <div :style="{'font-size':fontSize+'px'}"></div>
        <div :style="{color:activeColor,fontSize:fontSize+'px'}"></div>
    </template>

                （2）直接绑定一个样式对象

data(){
    return{
        styleObject:{
            color:'red',
            fontSize:'13px'
        }
    }
}

<template>
<div :style="styleObject"></div>
</template>

                （3）绑定返回样式对象的计算属性

                （4）绑定数组

<template>
<div :style="[baseStyles,overridingStyles]"></div>
</template>

                （5）自动前缀

                        可以通过给属性添加前缀来实现浏览器支持，可以对一个样式属性提供多个（不同前缀的）值，数组只会渲染浏览器支持的那个值

条件渲染

        1.v-if

                条件性的渲染一块内容，只有在指令表达式返回true时才会被渲染

<div v-if="awesome">awesome!</div>

        2.v-else  

                必须在v-if | v-else-if后面使用

<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">返true</h1>
<h1 v-else>返false</h1>

        3.v-else-if

                必须在v-else-if | v-if后面使用

        4.在<template>上添加v-if | v-else |v-else-if

                用来切换多个元素

<template v-if | v-else |v-else-if ="">
 ...
</template>

        5.v-show

                v-show会在DOM渲染中保留该元素，仅切换了该元素上display属性，无论初始条件如何，始终都会被渲染。

列表渲染

        1.v-for基于数组渲染列表

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<template>
<li v-for="item in items"> {{ item.message }} </li>
</template>

/* 输出结果：Foo
            Bar*/

        item为迭代项别名，items为源数据的数组

        也可以完整访问父作用域内的属性和变量

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}
<template>
<li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
</template>
/*输出结果 Parent-0-Foo
           Parent-1-Bar*/

        2.v-for 遍历对象所有属性

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}
<template>
<li v-for="(value, key, index) in myObject"> {{ index }}. {{ key }}: {{ value }} </li>
</template>
/*输出：
0.title.How to do lists in Vue
1.author.'Jane Doe'
2.publishedAt.2016-04-10
*/

         3.    v-for中使用范围

        n的初值是从1开始而不是0，v-for也可以用在<template>上使用来渲染一个包含多个元素的块

<template>
<span v-for='n in 10'>这是第{{n}}次循环</span>
</template>

         4.v-for与v-if

        v-if 和 v-for同时存在在一个元素上的时候，优先执行v-if，这意味着v-if的条件无法访问到v-for作用域内定义的变量别名，解决办法，在该元素外面新包装一层<template>，将v-for定义在其上

        5.通过key管理状态

                给每个元素对应的块提供一个唯一的key attribute来跟踪每个节点的标识，从而重用和重新排序现有的元素

<div v-for="item in items" :key="item.id"></div>

        注意事项：v-for在循环时，key只能使用number获取string

                          key在使用时只能使用x-bind的属性绑定的形式指定key值

                          推荐在v-for时就提供key attribute

        6.在组件上使用v-for

                因为组件有自己独立的作用域，在组件上使用v-for时除key还需要传递需要传递的数据

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

        7.数组变化侦测

        首先找出能够改变数组自身的数组api，再使用自定义函数覆盖

        （1）变更方法

                分别是：push、pop、shift、unshift、splice、sort、reverse，能变更原始数组，页面上的数据会发生同步变化，

替换一个数组

        （2）替换一个数组

                filter()、concat()、slice()不会变更原始数组，所以页面上的数据不会发生同步变化

        8.展示过滤或排序后的结果

        （1）通过计算属性来获得过滤或排序后的数组（使用reverse()和sort()时因为会变更原始数组，多以调用前需创建一个原数组的副本）

export default {
    data() {
      return {
        sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
      }
    },
    methods: {
      even(numbers) {
        return numbers.filter(number => number % 2 === 0)
      }
    }
}
<template><li v-for="n in evenNumbers">{{ n }}</li></template>

        （2）通过 method方法

export default {
    data() {
      return {
        sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
      }
    },
    methods: {
      even(numbers) {
        return numbers.filter(number => number % 2 === 0)
      }
    }
}
<template><ul v-for="numbers in sets"><li v-for="n in even(numbers)">{{ n }}</li></ul></template>

事件处理

        1.监听事件

                v-on指令

        2.内联事件处理器

                事件被触发时执行的内联js语句

export default {
  data() {
	  return {
    	count: 0
  	  }
	}
}
<template><button @click="count++">{{count}}</button></template>

                在内联处理器中调用方法

export default{
    methods: {
        say(message){
            alert(message)
        }
    }
}
<template>
    <button @click="say('hi')">Say hi</button>
</template>

                在内联事件处理器中访问事件参数

methods: {
  warn(message, event) {
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

                        1.传入$event变量

<button @click="warn('a', $event)">Submit</button>

                        2.使用内联箭头函数

<button @click="(event) => warn('a', event)">Submit</button>

        3.方法事件处理器

                v-on接受一个方法名或某个方法的调用

export default{
    data(){
        return{
            name:'cc'
        }
    },
    methods:{
        A(event){
            alert('Hello ${this.name}!')
            if(event){
                alert(..)
            }
        }
    }
}
<template><button @click='A'>A</button></template>

        4.事件修饰符

                v-on的事件修饰符。

.stop阻止冒泡
.prevent

阻止默认事件

.capture

添加事件侦听器时使用事件捕获模式

.self只当事件在该元素本身（不是子元素）触发时回调
.once事件只触发一次
.passive提前告诉浏览器，未使用阻止默认事件（event.preventDefault()）

        格式：<a @click.stop="doThis"></a>

                可以链式书写：<a @click.stop.prevent=" " ></a>  | <a @click.stop.prevent></a>

                        （要注意顺序，@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为，而@click.self.prevent只会阻止元素本身的点击事件默认行为）

        5.按键修饰符

        Vue允许为v-on在监听键盘事件时添加按键修饰符

<input @keyup.enter="submit"/>
/*仅在key为Enter时调用submit*/
.enter回车确认键.up上
.tabTAB键.down下
.delete捕获“删除”和“退格”键.left左
.esc

Esc取消键

.right右
.space空格键
系统按键修饰符
.alt.shift
.meta在Mac键盘中是Command键，在Window键盘上是Windows键.ctrl

        系统修饰符只有当按键被按下时才会触发

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

        6. .exact修饰符

                .exact修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符

<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

        7.鼠标按键修饰符

.left.right.middle

表单输入绑定（v-model）

        前端处理表单时，将表单输入框的内容同步给JavaScript中对应的变量，可以通过v-model指令简化手动连接值绑定和更改事件监听器的过程。v-model始终将当前绑定的JavaScript状态视为数据的正确来源，会忽略任何表单元素上初始的value、checked和selected attribute。

        <input :value="text" @input="event => text=event.target.value">

        简化后：<input v-model="text">

        v-model可以用于各种不同类型的输入，会根据所使用的元素自动使用对应的DOM属性和事件组合:

  • 文本类型的<input>和<textarea> 元素会绑定value property 并侦听input事件；     
  • <input type="checkbox">和<input type="radio"> 会绑定checked property 并侦听change事件；
  • <select>会绑定value property 并侦听change事件

       1. 基本用法

                文本：<p>Message is :{{message}}</p>

                           <input v-model="message" placeholder="write in" />

                多行文本： <span>Multilie message is:</span>

                                   <p style="white-space:pre-line;">{{message}}</p>

                                   <textarea v-model="message" placeholder="add multiple lines"></textarea>

                <textarea>中不支持插值表达式的，用v-model=" "来代替

                  复选框：

                        1.单一复选框

export default {
  data() {
    return {
      checked: true
    }
  }
}

<template>
	<input type="checkbox" id="checkbox" v-model="checked" />
	<label for="checkbox">{{ checked }}</label>
</template>
/*勾选返true，取消勾选返false*/

                        2.多个复选框绑定到同一个数组或集合的值

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

<template>
  <div>Checked names: {{ checkedNames }}</div>

  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
 
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
 
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
</template>

                单选按钮

export default {
  data() {
    return {
      picked: 'One'
    }
  }
}

<template>
	<div>Picked: {{ picked }}</div>

	<input type="radio" id="one" value="One" v-model="picked" />
	<label for="one">One</label>

	<input type="radio" id="two" value="Two" v-model="picked" />
	<label for="two">Two</label>
</template>

                 选择器

                        1.单个选择器

export default {
  data() {
    return {
      selected: ''
    }
  }
}

<template>
  <span> Selected: {{ selected }}</span>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

                        2.多选（将值绑定到一个数组中）

export default {
  data() {
    return {
      selected: []
    }
  }
}

<template>
  <div>Selected: {{ selected }}</div>

  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

                        3.用v-for动态渲染选择器选项

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}

<template>
  <select v-model="selected">
    <option v-for="option in options" :value="option.value"> {{ option.text }} </option>
  </select>

  <div>Selected: {{ selected }}</div>
</template>
/*选One显示A*/

        2.值绑定

                 对于单选按钮、复选框和选择器选项，v-model绑定到值通常是静态的字符串（复选框为布尔值），可以用v-bind来实现将值绑定到当前组件实例上的动态数据以及将选项值绑定为非字符串的数据类型

<!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

                （1）复选框

<input
  type="checkbox"
  v-model="toggle"

//true-value="yes"
  :true-value="dynamicTrueValue"

// false-value="no"
  :false-value="dynamicFalseValue" />

//toggle属性的值被选中时为yes，取消选中时为no
/*true-value和false-value是Vue特有的attributes*/

                （2）单选按钮

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />
//pick 会在第一个按钮选中时被设为first，第二个按钮选中时设为second

                （3）选择器选项

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
//当某个选项被选中，selected会被设为该对象字面量值{number:123}

        3.修饰符

                （1）.lazy

        默认情况下，v-model会在每次input事件后更新数据，可以通过.lazy来改为在每次change事件后更新数据

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

                （2）.number

        让用户输入自动转换为数字，若该值无法被parseFloat()处理，则返回原始值，number修饰符会在输入框有type="number"时自动启用

<input v-model.number="age" />

                 （3）.trim     使默认自动去除用户输入内容中两端的空格

<input v-model.trim="msg" />

 

侦听器

        watch选项：在每次响应式属性发生变化时触发一个函数

        侦听器侧重监听单个数据的变化，最终执行特定的业务处理，不需要任何返回值，如果需要一般将结果赋值给另外一个变量

        （1）简单侦听器

                不能人为调用，只要侦听的数据发生变化就会自动触发

watch:{
    //定义侦听函数
    想侦听的属性名称（新值，旧值）{
        ..
}

        （2）深层侦听器

                        侦听所有嵌套的变更，深度侦听需要遍历被侦听对象中的所有嵌套的属性。

export default {
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的变更中，只要没有替换对象本身，那么这里的 `newValue` 和 `oldValue` 相同
      },
      deep: true
    }
  }
}

        （3）即时回调侦听器（immediate选项）

                        运用handler方法和immediate:true选项强制回调函数立即执行，

export default {
  // ...
  watch: {
    //侦听question属性值的变化
    question: {
      handler(newQuestion) {
        // 在组件实例创建时会立即调用
      },
      // 强制立即执行回调
      immediate: true
    }
  }
  // ...
}

          （4）回调的触发时机（flush:'post'）

                             默认情况下，用户创建的侦听器回调都会在Vue组件更新之前被调用，而flush:'psot'选项可以使在更新之后被调用

export default {
  watch: {
    key: {
      handler() {},
      flush: 'post'
    }
  }
}

           （5）this.$watch(）

                        运用组件实例的$watch()来命令式的创建一个侦听器

export default {
  created() {
    this.$watch('question', (newQuestion) => {
      // ...
    })
  }
}

        （6）停止侦听器

                        少数情况下需要在组件卸载之前就停止一个侦听器，通过调用$watch() API返回的函数来停止侦听器

const unwatch = this.$watch('foo', callback)

// ...当该侦听器不再需要时
unwatch()

        （7）deep选项

                        当watch侦听的是一个对象，如果对象中的属性值发生变化，则无法被监听到，可以通过deep选项来侦听

watch:{
    obj:{
        handler(){
            ..//当监听的属性值发生变化时
        },
//用来侦听指定对象中的属性值变化
    deep:true
}

模板引用（ref）

        ref是一个特殊的attribute，它允许我们在一个特定的DOM元素或者子组件实例被挂载后，获得对它的直接引用。

<input ref='input'>

        （1）访问模板引用（this.$refs）

                只有在组件挂载结束后才能访问模板引用，如果在模板表达式上访问$refs.input，因为为初次渲染，所以为null

this.$refs.input.focus()

        （2）在v-for上的引用

                在v-for中使用模板引用，相应的引用中包含的值是一个数组

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    console.log(this.$refs.items)
  }
}
</script>

<template>
  <ul><li v-for="item in list" ref="items">{{ item }}</li></ul>
</template>

        （3）函数模板引用

<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">

        （4）加在组件上

                调用子组件的methods，修改子组件的data

Ther19
关注
  • 4
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础笔记111111111
08-11
Vue.js 是一款流行的前端JavaScript框架，用于构建...以上是Vue.js的基础知识点，包括其核心的MVVM模式、数据绑定、事件处理、条件渲染、循环遍历以及优化技术。掌握这些知识能帮助开发者有效地构建和维护Vue.js应用。
构建vue初始化项目 第一种方法：vue create 命令构建vue项目
weixin_72303943的博客
07-10 1万+
构建vue初始化项目 第一种方法：vue create 命令构建vue项目
vue-create 创建 VUE3项目-创建
dayouan的博客
03-30 4660
创建vue3项目流程快捷创建和自定义创建
【Vue】使用create-vue搭建Vue3项目
最新发布
qq_39921135的博客
06-14 395
create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应。Vue CLI 是用来创建Vue2的。如果是创建Vue3，底层更推荐使用create-vue。由于现在还没有到项目，到项目再具体的去定制化，现在就一律选中No即可，ESLint可以选上。vite是尤大大创建的vue构建工具，并且是市场上非常火爆的。前置条件 - 已安装16.0或更高版本的Node.js。执行如下命令（初始化），这一指令将会安装并执行。使用键盘上的左右键进行切换选择。
Vue学习笔记（二）
qq_41045128的博客
06-30 4323
官网:https://v3.cn.vuejs.org/guide/introduction.html目录一、单页面应用程序二、创建SPA三、vite项目结构四、Vue的组件构成组件化思想可以大大提高了代码的复用性和灵活性，App.vue 本身也是一个组件。当我们想要进行组件的复用时，需要对组件进行先注册，然后再使用。...
如何用Vue开发前端和网站
itcyy的博客
11-05 1422
如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。虽然本指南中的许多示例只需要一个组件，但大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
第一节: 全面细致的理解创建vue3应用的 createApp函数
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-10 3138
相信大家已经比较熟了, 就是父组件给子组件传参的方式. 问题在于根组件已经是顶级组件了, 没有父组件传入。类型, 可以查看源码. 我们可以通过在控制台输出的方式, 查看返回的应用对象都具有哪些属性.参数, 可以是一个真实DOM元素, 也可以是一个选择器字符串。模板是需要编译成渲染函数, 通过调用渲染函数, 获取返回的。的第一个参数除了可以是单文件组件, 也可以是选项对象。选项, 直接编写渲染函数, 渲染函数需要返回。函数的第一个参数, 接下来我们分析第二个参数。函数接受两个参数, 第二个参数是可选地,
Vue基础笔记，适合小白
05-24
适合小白
vue基础笔记2-自存资料-需要自取
08-10
Toto-list案例源码，需要的自取，打基础的vue练习
最新尚硅谷vue系列笔记
02-11
8. **学习资源**："尚硅谷vue系列笔记"可能包含的是针对Vue.js的学习资料，涵盖基础到高级的内容，帮助开发者深入理解Vue及其应用。`vue-learning-master.zip`和`vue-advance-master.zip`可能是不同阶段的学习资源，...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue源码学习(一)——createApp
m0_74793405的博客
12-14 684
主要是记录，复习一下近期的源码学习。
create-vue快速生成项目，到底是怎么做的
郊眠寺
03-13 1584
前段时间我们有去探索了一下vue-clicra的原理，生成项目的过程，他是基于webpack的，但是今天我们的主角是create-vue，他是基于vite的，为什么要使用vite而不是webpack呢？因为vite比webpack快。我们使用vue-cli和vitewebpackvite就目前的图来看vite在构建、启动项目的时候会比webpack快10倍，这还是仅仅只是简单的项目，前端的项目复杂程度本来就是呈指数上升的，这时候vite与webpack可谓是天差地别。那么接下来我将带领大家一步一步去探索。
Vue系列之使用vue create搭建前端项目
老__L的博客
12-16 1230
使用vue create搭建前端项目
VUE 使用 vue create 命令 创建 vue2.0 项目
不想成为可以改变世界的程序员，不是一个好程序员
06-07 2万+
VUE 使用 vue create 命令 创建 vue2.0 项目 为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题，我们使用 管理员身份 打开命令行 g:表示切换进入G盘 cd git表示打开 当前盘下的 git 文件夹 大家可以根据以上两个命令进入自己想要保存项目的目录下，我这里是保存在 G:\Git 文件夹.........
浅析vue的createApp方法
wlijun_0808的博客
09-15 490
浅析vue的createApp方法
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
热门推荐
逆境清醒的博客
03-19 6万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
vue3 源码解析（4）— createApp 源码的实现
old brother stable
01-12 1427
我们通过阅读源码了解到，createApp 函数是 vue3 的入口函数，通过 createApp 函数我们可以创建一个应用。createApp 的实现是借助了 createRenderer 函数，createRenderer 的实现内部包装了createAppAPI。createApp 函数接收一个组件，然后返回一个应用，这个应用中有一个 mount 方法，这个 mount 方法就是用来将应用挂载到容器中的。
vue3.2新功能
11-11 2192
vue3.0我们用的变量只能通过写在setup函数里面并且 return出去才能用，这样就很麻烦，现在vue3.2出了一个语法糖很好的解决了这个问题。vue3.2它直接把setup写在了标签内 并且不用写export default{} 内容是不是简洁了。四、vue3中已经不支持像vue2引入那样引入element-ui的。二、 setup中的变量可以用到样式上去。先不写笔记不在这 在公司 明天写。1)、vue3.0的写法。2)、vue3.2的写法。一、setup的语法糖。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、指令等。 2. 组件化开发：学习如何创建和使用Vue组件，掌握组件之间的通信方式，包括props和事件。 3. 路由管理：学习使用Vue Router实现前端路由，实现单页应用的页面跳转和导航。 4. 状态管理：掌握Vuex的使用，实现全局状态管理和数据共享。 5. 表单处理：学习如何使用Vue表单指令和表单验证，处理用户输入和表单提交。 6. HTTP请求：了解Vue中常用的HTTP库，如axios，进行数据的异步请求和处理。 7. 生命周期：理解Vue生命周期钩子函数的执行顺序和作用，掌握组件的生命周期管理。 8. Vue3新特性：了解Vue3的新特性，如Composition API、Teleport、Fragments等。 尚硅谷还提供了一些实战项目，如电商平台、博客系统等，可以通过完成这些项目来巩固所学的知识。 以上是一些关于尚硅谷Vue学习笔记的要点，希望对你有所帮助！如果有更具体的问题，欢迎继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值