vue基础知识

白小白笔记

已于 2023-04-23 17:03:12 修改

阅读量104

点赞数

文章标签： vue.js javascript 前端

于 2023-04-13 17:03:10 首次发布

本文链接：https://blog.csdn.net/m0_66778036/article/details/130101975

版权

@vue基础知识点目录

vue 基本语法结构引入脚本文件

引入脚本文件：

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

vue3 基本语法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>vue基本结构</title>
</head>
<body>


<div id="app">
    <p>{{message}}</p>
</div>    
    <script>
        const{createApp} = Vue
        createApp({
            data(){
                return{
                    message:'hello vue'
                }
            }
        }).mount('#app')//挂载id='app'的div
    </script>
</body>
</html>

安装vue调试工具：

打开浏览器，点击右上角三个小点，找到扩展
点击扩展跳出弹框，选择打开Microsoft Edge加载项
进入主页搜索vue 选择要下载的点击获取
获取成功后运行页面检查如上图所示及可应用调试工具

指令大全

1.文本渲染：

		v-text  覆盖原文本内容
  		{{}}：插值表达式  
  		v-html:不仅会渲染文本内容 同时还会渲染html内容
  	@[TOC](这里写目录标题)

2.动态绑定：v-bind

v-bind:  简写':'   冒号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>v-bind绑定数据内容给属性</title>
</head>

<body>
<div id="app">
    <input type="text" v-bind:placeholder="input">
    <img alt="" v-bind:src="src">
</div>
    <script>
        const{createApp} = Vue
        createApp({
            data(){
                return{
                    input:'动态绑定input的值给placeholder属性',
                    src:'./favicon.ico'
                }
            }

        }).mount('#app')
    </script>

</body>
</html>

----扩展----通过插值运算符插值运算符{{}}几种获取内容的方式

//html
    <p>{{number+1}}</p>
    <p>{{ok?'true':'false'}}</p>
    <p :id="'list-'+id">拼接</p>
    <p>{{user.name}}</p>
    <p>{{user.age}}</p>
    <p>{{message.split('').reverse().join('-')}}</p>

//script
data(){
                return{
                    number:22,
                    ok:true,
                    id:'1',
                    user:{
                        name:'调用user中的name',
                        age:12,
                    },
                    message:'反转并由-连接'
                }
            }

3.事件绑定：v-on

v-on:click 绑定点击事件
v-on:input
v-on:keyup 键盘弹起事件

简写形式： @

//直接写在标签内部 不用单独写在methods方法里面
//count必须写在data(){return{count：}}里面
<button @click="count+=1">点击{{count}}</button>

绑定的事件写在methods方法里[^1]

<div id="app">
    <button v-on:click="addCount">点击{{count}}</button>
</div>

    <script>
        const{createApp} = Vue
        createApp({
            data(){
                return{
                    count:1
                }
            },
            methods:{
                addCount(){
                    this.count += 1
                }
            }
        }).mount('#app')
    </script>

event接收事件简写:e
!!!通过三目运算判断背景颜色 event接收

<button @click="addCount">点击{{count}}</button>

methods:{
   addCount(e){
   //e--event
      const newColor = e.target.style.background
      e.target.style.background = newColor === 'red'? '':'red'
              this.count += 1
       }
}

事件修饰符

@click.prevent=" " 阻止默认行为
@click.stop=" " 阻止冒泡行为
了解：
@click.capture=" "
@click.once=" " 事件触只发一次
@click.slef=" " 点击当前元素才会触发

按键修饰符

@keyup.enter 只有按enter回车键时才触发
@keyup.esc 只有按es键时才触发

4.双向绑定：v-model

只应用于表单元素：input select option

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>v-model双向绑定数据内容</title>
</head>
<body>
<div id="app">
    <p>{{uname}}</p>
    <input type="text" v-model="uname">
    <hr>
    <p>城市：{{city}}</p>
    <select name="" id="" v-model="city">
        <option value="0">请选择</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">南宁</option>
        <option value="4">深圳</option>
    </select>
</div>
    <script>
        const{createApp} = Vue
        createApp({
            data(){
                return{
                    uname:'姓名',
                    city:'',
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

v-model修饰符

v-model.number=“” 将用户输入的内容转化成数字型
v-model.trim=“” 自动将用户输入的内容去除两端空格
v-model.lazy=“” 输入内容不实时更新数据

5显示隐藏指令：v-if v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>v-bind绑定数据内容给属性</title>
</head>
<body>
<div id="app">
    <button @click="flag=!flag">隐藏</button>//切换
    <p v-if="flag">v-if</p>
    <p v-show="flag">v-show</p>
</div>
    <script>
        const{createApp} = Vue
        createApp({
            data(){
                return{
                    flag:true,
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

v-show 与 v-if 的区别

v-if：
动态的添加删除DOM元素应用于不频繁切换
v-show:
动态的在元素上添加删除样式display：none ；应用于频繁切换

6循环指令：v-for

语法：
v-for=“(i,index) in arr”
i：当前循环项
index：索引号
arr：循环的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>数组循环li</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(i,index) in list">
        <input type="checkbox">索引是:{{index}} 姓名:{{i.name}} id:{{i.id}}
        </li>
    </ul>
</div>
    <script>
        const{createApp} = Vue
        createApp({
            data(){
                return{
                    arr:[
                        {id:1,name:'张三'},
                        {id:2,name:'李四'},
                        {id:3,name:'王五'},
                    ]
                }
            }
        }).mount('#app')
    </script>

</body>
</html>

：key=“i.id” key维护列表状态（列表更新后已选中的列表状态如果出现紊乱，便使用key属性）

key注意事项：
key的值只能是数字或字符串
key的值不能重复
最好使用id 具有唯一性

创建vue项目

vue-cli创建

运行速度慢
支持vue2，vue3
基于webpack
大而全

用vue-cli创建项目并运行

vite创建

运行速度快
仅支持vue3
不基于webpack
小而巧

用vite创建项目并运行

//创建项目：
npm init vite-app 项目名
//进入项目：
cd 项目路径
//安装依赖包
npm i
//运行
npm run dev