vue基础记录概述是一个基于MVVM (Model,View,ViewModel)的渐进式 JavaScript 框架

概述

是一个基于MVVM (Model,View,ViewModel)的渐进式 JavaScript 框架.

Vue 3 和 Vue 2 的区别：

更好的性能和更小的体积：Vue 3 优化了底层的实现，提高了运行时性能和渲染速度，并且压缩后的体积也更小。
更好的响应式系统:Vue 3 的响应式系统通过使用 Proxy+Reflect对象来代替 Object.defineProperty 实现，这使得 Vue 3 可以更好地处理数组和嵌套对象的响应式数据。
更好的 TypeScript 支持：Vue 3 本身就是使用 TypeScript 编写的，因此对 TypeScript 的支持更好。
新的组合式 API：Vue 3 提供了一种新的组合式 API，让开发人员可以更好地组织和重用代码。
更好的 TypeScript 支持：Vue 3 本身就是使用 TypeScript 编写的，因此对 TypeScript 的支持更好。
更好的渐进式升级：Vue 3 通过提供一个名为“Vue 2 兼容性构建”的版本，可以让开发人员逐步升级其应用程序，而不需要一次性进行大规模的更改。
更好的错误处理：Vue 3 提供了更好的错误处理机制，可以更好地处理运行时错误，并提供了更好的警告信息。

总之，Vue 3 是一个更加现代化和高效的框架，相比 Vue 2 有许多的改进和优化，同时保留了许多 Vue 2 的优点。

创建实例

首先在HTML文件中创建一个div#app

<div id='app'>
  <p>{{count}}</p>
  <ul>
    <li>{{ user.username }}</li>
    <li>{{ user.password }}</li>
  </ul>
</div>

`Vue2`的创建方式

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
	const vm = new Vue({
    // 绑定的容器/挂载点
    el:"#app",  
    // 挂载的数据
    data:{
      count:0
    }
  })

Vue2中Vue是一个构造函数

`Vue3`的创建方式

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  	const { createApp } = Vue
		createApp({
      data(){
        return{
        	count:0,
          user:{
          username:'张三',
          password:123456
          }
        }
      }
  }).mount('#app');

Vue3中Vue是一个Object对象

为了解决Vue2中对新增或删除属性进行操作,视图无法响应的问题Vue2提供了

$set / $delete的方法

基础指令

v-text

与直接写{{ username }}这种方式一样,不会解析HTML元素

<div v-text='username'></div>

v-html

v-html会解析data中的HTML元素

<!-- 张三  -->
<div id="app">
  <div v-html="username"></div> 
</div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
	const vm = new Vue({
    // 绑定的容器/挂载点
    el:"#app",  
    // 挂载的数据
    data:{
      username:'<span>张三</span>'
    }
  })

v-cloak

为了防止出现未编译模板闪现 这种情况产生,可配合css样式处理

[v-cloak]{
  display:none;
}

<div v-cloak>{{ username }}</div>

v-on

v-on:click绑定事件可以缩写为@click

    <div id="app" v-cloak>
        <!-- v-on:click可简写为 @click -->
        <button v-on:click="count++">count is {{count}}</button>
        <button @click="change">count is{{count}}</button>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0,
            user: {
                name: '张三',
                age: 10,
                sex: `<strong>男♂性</strong>`
            },
        },
        methods: {
            change(){
                this.count++;
            }
        }
    })
</script>

v-on的修饰符

  <div id="app" v-cloak>
        <!-- once代表函数只执行一次 -->
        <button @click.once="count++">count  is {{ count }}</button>
        <!-- v-bind:src可简写为 :src -->
        <!-- 参数若未设置,则默认第一个参数为event,若传入了参数,则可用$event获取event -->
        <ul @click='ulChange(1,2,$event)'>
            <!-- stop阻止事件冒泡,相当于event.stopPropagation -->
            <li @click="liChange">1111111111</li>
        </ul>
        <hr/>
        <!-- self只从当前自身触发 -->
            <ul @click.self='ulChange(1,2,$event)'>
                <li @click="liChange">22222222222</li>
            </ul>
        <!-- prevent阻止默认事件,相当于event.preventDefault -->
        <a @click.prevent="linkChange" href="https://www.google.com">preventDefault</a>
        <input type="text" @keydown.enter="keyEvent">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                count: 0,
                imgSrc: 'https://img95.699pic.com/photo/50136/1351.jpg_wh300.jpg'
            },
            methods: {
                ulChange(arg1,arg2,event) {
                    // console.log(arg1,arg2,event);
                    console.log('ul change');
                },
                liChange() {
                    console.log('li change');
                },
                linkChange(){

                    console.log('link change');
                },
                keyEvent(e){
                    console.log(e);
                    console.log(e.target.value);
                }
            }
        })
    </script>

v-bind

v-bind:srcAttibute属性绑定可简写为:src

    <div id="app" v-cloak>
        <!-- v-bind:src可简写为 :src -->
        <img v-bind:src=imgSrc  alt="">
        <img :src=imgSrc  alt="">
    </div>

    
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
           imgSrc:'https://img95.699pic.com/photo/50136/1351.jpg_wh300.jpg'
        },
        methods: {
            change(){
                this.count++;
            }
        }
    })
</script>

同理 :class ****:style也是一样,但注意:css中的font-size类似写法要写成fontSize这种小驼峰式.

v-show

根据v-show表达式的结果值为真时显示,示例如下:

<div id="app" v-cloak>
  <button @click="flag=!flag">button</button>
  <div v-show="flag">
    <!-- 不支持在template上使用 因为v-show控制的是当前元素的display为none/block -->
    <p>{{user.username}}</p>
    <p>{{user.password}}</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const { createApp } =Vue;
    const app = createApp({
        data(){
            return {
                flag:false,
                user:{
                    username: 'zhangsan',
                    password: '123456'
                }
            }
        }
    })
    app.mount('#app');
</script>

注意: v-show会在DOM渲染中保留该元素,仅切换 display的 CSS 属性。不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

v-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

    <div id="app" v-cloak>
      <button @click="flag=!flag">Toggle Element</button>
      <p v-if="flag">我是段落标签</p>
    </div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const { createApp } =Vue;
    const app = createApp({
        data(){
            return {
                flag:false,
                user:{
                    username: 'zhangsan',
                    password: '123456'
                }
            }
        }
    })
    app.mount('#app');
</script>

v-else-if

顾名思义，v-else-if 提供的是相应于 v-if 的 “else if 区块” 。它可以连续多次重复使用：

    <div id="app" v-cloak>
      <button @click="flag=!flag">Toggle Element</button>
      <p v-if="type==='A'">我是段落A标签</p>
      <p v-else-if="type==='B'">我是段落B标签</p>
        <p v-else>我既不是A也不是B</p>
    </div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const { createApp } =Vue;
    const app = createApp({
        data(){
            return {
                flag:false,
                type:'A',
                user:{
                    username: 'zhangsan',
                    password: '123456'
                }
            }
        }
    })
    app.mount('#app');
</script>

v-else

你也可以使用 v-else 为 v-if 添加一个 “else 区块” 。

    <div id="app" v-cloak>
      <button @click="flag=!flag">Toggle Element</button>
      <p v-if="flag">我是段落1标签</p>
        <p v-else>我是段落2标签</p>
    </div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const { createApp } =Vue;
    const app = createApp({
        data(){
            return {
                flag:false,
                user:{
                    username: 'zhangsan',
                    password: '123456'
                }
            }
        }
    })
    app.mount('#app');
</script>

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个

vue基础记录

概述