vue基础

最新推荐文章于 2024-08-08 08:28:42 发布

AGMY

最新推荐文章于 2024-08-08 08:28:42 发布

阅读量6.8k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_41103051/article/details/124125513

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

Vue介绍

Vue是一套用于构建用户界面的渐进式框架。（动态构建用户界面的渐进式 JavaScript 框架）
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue的特点

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 也可以引入其它第三方库开发项目

引入vue

在网址https://cn.vuejs.org/v2/guide/installation.html
在这里插入图片描述

点击开发版本下载
开发版本：包含完整的警告和调试模式，更加适合于开发者使用
生产版本：删除了警告，整体更加小，适用于项目完成后的部署上线使用
在HTML网页中使用script标签引用

初始Vue(Hello Vue!)

声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
插值语法：

<div id="root">
{{message}}
</div>

el:类似于选择器

new Vue({
el:'#root',
data:{
    message:'Hello Vue!'
}
})

指令语法：

数据绑定
单向数据绑定
1.语法：v-bind:href="xxx"或简写为 :href
v-bind给标签属性动态添加数据
2.特点：数据只能从data流向页面

<div id="root">
<a v-bind:href="url">点我去百度</a>
</div>

new Vue({
el:'#root',
data:{
   url:"www.baidu.com"
}
})

插值语法用于解析标签体内容
指令语法用于解析标签（包括：标签属性，标签体内容，绑定事件…）

<div id="#root">
   单向数据绑定:<input type='text' v-bind:value="name"/>
</div>

new Vue({
    el:'#root',
    data:{
        name:"傅工"
    }
})

在这里插入图片描述

双向数据绑定

v-model:实现表单输入和应用状态之间的双向绑定

<div id="root">
     <p>{{name}}</p>
     双向数据绑定:<input type='text' v-model:value="name"/>
</div>

new Vue({
el:'#root',
data:{
    name:'刘强'
}
})

注：v-model只能应用在表单类元素（输入类元素）上
Vue中有2种数据绑定方式：
1.单向数据绑定（v-bind）：数据只能从data流向页面。
2.双向数据绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model：value 可以简写为v-model，因为v-model默认收集的就是value值。

el与data的两种写法
el的两种写法

<div id="root"> 
    <h1>你好！{{name}}</h1>
</div>

const v=new Vue({
    //el:'#root',//第一种写法
    data:{
        name:'刘强'
    }
})


//方式二：使用$mount来选择加载容器
//v.$mount('#root')
//等一秒钟关联
setTimeout(()=>{
v.$mount('#root')
},1000)

data的两种写法

<div id="root"> 
    <h1>你好！{{name}}</h1>
</div>

const v=new Vue({
    el:'#root',
    //data第一种写法：对象式
    //data:{
    //    name:'刘强'
    //}
    //data第二种写法：函数式
    data(){
        console.log('@@@',this)//此处的this是Vue实例对象
        return{
            name:'刘强'  
        }
    }
})

data与el有两种写法
1.el有两种写法
（1）new Vue时配置el属性
（2）先创建Vue实例，随后再通过vm.$mount（‘#root’）指定el的值
2.data有两种写法
（1）对象式
（2）函数式
如何选择：目前哪种写法都可以，到后面学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则
由Vue管理的函数，一定不要箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

理解MVVM模型

M:模型（Model）:对应data中的数据
V:视图（View）:模板
vm:视图模型（ViewModel）：Vue实例对象
在这里插入图片描述

<div id="root">
  <h1>学校名称:{{name}}</h1>
  <h1>学校地址:{{address}}</h1>
</div>

new Vue({
el:'#root'
data:{
    name:"幼专",
    address:"重庆"
}
})

在这里插入图片描述
MVVM模型
1.M：模型（Model）：data中的数据
2.V：视图（View）：模板代码
3.VM：视图模型（ViewModel）:Vue实例
观察发现：
1.data中所有的属性，最后都出现在了VM身上。
2.VM身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

事件处理

方式1：
v-on:添加一个事件监听器

<div id="root">
<h1>欢迎来到{{name}}学习</h1>
<button v-on:click='showInfo'>点击我提示信息</button>
</div>

new Vue({
    el:'#root',
    data:{
    name:'幼专'
    },
    methods:{
        showInfo(){
          alert("同学你好!")
        }
    }
})

方式二：
@click

<div id="root">
   <h1>{{content}}</h1>
    <button @click="bot">下一句</button>
</div>

new Vue({
    el:'#root',
    data:{
        content:"好好学习，"
    },
    methods:{
        bot:function (){
            this.content="天天向上！"
        }
    }
})

传参数

<div id="root">
    <button @click="demo(60)">点击</button>
</div>

new Vue({
    el:'#root',
    data:{
      
    },
    methods:{
        demo:function (number){
           console.log(number)
        }
    }
})

在这里插入图片描述
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件。其中xxx是事件名。+
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数。this的指向是vm 或组件实例对象；
5.@click=“demo” 和 @click=“demo($event)” 效果一样，但后者可以传参；

事件修饰符

<div id="root">
    <h3>欢迎来到{{name}}学习</h3>
    <a href="http://www.baidu.com" @click="showInfo">点击我提示</a>
</div>

new Vue({
    el:'#root',
    data:{
        name:"幼专"
    },
    methods:{
        showInfo:function (){
            alert("欢迎同学！")
        }
    }
})

出现的问题：弹出了提示框，但是又跳转到了百度
要求：只弹出提示框，不进行百度跳转
prevent：阻止默认行为

<div id="root">
    <h3>欢迎来到{{name}}学习</h3>
    <a href="http://www.baidu.com" @click.prevent="showInfo">点击我提示</a>
</div>

new Vue({
    el:'#root',
    data:{
        name:"上海"
    },
    methods:{
        showInfo:function (){
            alert("欢迎同学！")
        }
    }
})

Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素是才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

阻止事件冒泡（常用）；

<div id="root">
    <div class="demo1"  @click="showInfo">
        <button @click.stop="showInfo">点击我提示信息</button>
    </div>
</div>

new Vue({
    el:'#root',
    data:{

    },
    methods:{
        showInfo:function (){
            alert("欢迎同学！")
        }
    }
})

<style>
    *{
        margin-top: 20px;
    }
    .demo1{
        height: 50px;
        background-color: skyblue;
    }
</style>

事件只触发一次（常用）；

<div id="root">
        <button @click.once="showInfo">点击我提示信息</button>
</div>

new Vue({
    el:'#root',
    data:{

    },
    methods:{
        showInfo:function (){
            alert("欢迎同学！")
        }
    }
})

stop与prevent连用

<div id="root">
    <div class="sty" @click="showInfo">
        <a :href="url" class="styl" @click.prevent.stop="showInfo">点击我</a>
    </div>
<script>

new Vue({
    el:'#root',
    data:{
      url:"https://www.baidu.com/"
    },
    methods:{
        showInfo() {
            alert("你好！")
        }
    }
})

键盘事件

@keyup

<div id="root">
    <input @keyup.enter="showInfo"></input>
</div>

new Vue({
    el:'#root',
    data:{

    },
    methods:{
        showInfo:function (e){
            // if(e.keyCode !==13) return
            console.log(e.target.value)
        }
    }
})

Vue中常用的按键别名：
回车=》enter
删除=》delete（捕获"删除"和"退格"键）
退出=》esc
空格=》space
换行=》tab
上=》up
下=》down
左=》left
右=》right

计算属性

computed

<div id="root">
    姓:<input v-model="firstname"><br><br>
    名:<input v-model="lastname"><br><br>
<!--    全名:<span>{{fullName}}</span><br><br>-->
<!--    全名:<span>{{fullName}}</span><br><br>-->
<!--    全名:<span>{{fullName}}</span><br><br>-->
    全名:<span>{{fullName}}</span>
</div>

const vm=new Vue({
     el:'#root',
     data:{
         firstname:"张",
         lastname:"三"
     },
     computed:{
         fullName:{
             //get有什么作用？当有读取fullName时，get就会被调用。且返回值就作为fullName的值
             //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
             get(){
                 console.log("get被调用了")
                 // console.log(this) //此处的this是vm
                 return this.firstname+'-'+this.lastname
             },
             //set什么时候调用？当fullName被修改时。
             set(value){
                 console.log('set',value)
                 const arr=value.split('-')
                 this.firstname=arr[0]
                 this.lastname=arr[1]
             }
         }
     }
 })

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算的来
2.原理：底层借助了object.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
（1）初次读取时会执行一次
（2）当依赖的数据发生改变时会被在次调用
4.优势：与methods实现相比，内部有缓存机制（复用）。效率更高，调用方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

计算属性_简写
注：只考虑读取，不考虑修改时使用

<div id="root">
    姓:<input v-model="firstname"><br><br>
    名:<input v-model="lastname"><br><br>
    全名:<span>{{fullName}}</span>
</div>

const vm=new Vue({
     el:'#root',
     data:{
         firstname:"张",
         lastname:"三"
     },
     computed:{
         //完整写法
// fullName:{
//     get(){
//         console.log("get被调用了")
//         return this.firstname+'-'+this.lastname
//     },
//     set(value){
//         console.log('set',value)
//         const arr=value.split('-')
//         this.firstname=arr[0]
//         this.lastname=arr[1]
//     }
// }


    //简写：
   fullName(){
    console.log("get被调用了")
    return this.firstname+'-'+this.lastname
        }
     }
 })

监视属性

使用之前知识点的写法：

<div id="root">
    <h2>今天天气很{{info}}</h2>
    <!--    绑定事件的时候@xxx="yyy"_yyy可以写一些简单的语句-->
    <!--    <button @click="isHot=!isHot">切换天气</button>-->
    <button @click="changeWeather">切换天气</button>
</div>

new Vue({
    el:'#root',
    data:{
        isHot:true
    },
    computed:{
        info(){
            return this.isHot?'炎热':'凉爽'
        }
    },
    methods:{
        changeWeather(){
            this.isHot=!this.isHot
        }
    }
})

使用监视属性写法：
watch

<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

const vm=new Vue({
      el:'#root',
      data:{
          isHot:true
      },
      computed:{
          info(){
              return this.isHot?'炎热':'凉爽'
          }
      },
      methods:{
          changeWeather(){
              this.isHot=!this.isHot
          }
      },
    //第一种方式
      // watch:{
      //     isHot:{
      //         immediate:true,//初始化时让handler调用一下
      //         //handler什么时候调用？当isHot发生改变时。
      //         handler(newValue,oldValue){
      //             console.log("isHot被修改了",newValue,oldValue)
      //         }
      //     }
      // }
  })
//通过VM第二种方式
vm.$watch('isHot',{
    immediate:true,//初始化时让handler调用一下
            //handler什么时候调用？当isHot发生改变时。
            handler(newValue,oldValue) {
                console.log("isHot被修改了", newValue, oldValue)
            }
})

监视属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法：
（1）new Vue时传入watch的配置
（2）通过vm.$watch监视

条件渲染

条件v-if

<div id="root">
    <p v-if="seen">这是p标签</p>
</div

new Vue({
el:'#root',
data:{
    seen:true
}
})

v-if-else

<div id="root">
    <h2 v-if="seen">hello Vue!</h2>
    <h2 v-else>暂无数据!</h2>
</div>

new Vue({
       el:'#root',
       data:{
           seen:false
       }

 })

v-else-if

<div id="root">
    <div v-if="seen === '1'">
        A
    </div>
    <div v-else-if="seen === '2'">
        B
    </div>
    <div v-else-if="seen === '3'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>

new Vue({
       el:'#root',
       data:{
           seen:"5"
       }

 })

v-show

根据条件展示元素

<div id="root">
    <h1 v-show="seen">Hello!</h1>
</div>

new Vue({
       el:'#root',
       data:{
           seen:false
       }

 })

列表渲染

<div id="root">
    <ol>
        <li v-for="item in todos">{{item.text}}</li>
    </ol>
</div>

new Vue({
el:'root',
data:{
    todos:[
        {text:"学习javascript"},
        {text:"学习Vue"},
        {text:"学好前端知识"}
    ]
}
})

表单输入绑定

v-model用户输入双向绑定数据

复选框（checkbox）

<div id="root">
    <input type="checkbox" v-model="checken">复选按钮
</div>

new Vue({
    el:"#root",
    data(){
        return{
            checken:true
        }
    }
})

多个复选框

<div id="root">
    <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>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
    el:"#root",
    data(){
        return{
            checkedNames:[]
        }
    }
})

单选按钮

<div id="root">
    <input type="radio" id="one" value="0" v-model="picked">
    <label for="one">男</label>
    <br>
    <input type="radio" id="two" value="1" v-model="picked">
    <label for="two">女</label>
    <br>
    <span>性别: {{ picked }}</span>
</div>

new Vue({
    el:"#root",
    data(){
        return{
            picked:''
        }
    }
})

下拉选项

<div id="root">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
</div>

new Vue({
    el:"#root",
    data(){
        return{
            selected:''
        }
    }
})

用 v-for 渲染的动态选项：

<div id="root">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>

new Vue({
    el:"#root",
    data(){
        return{
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    }
})

修饰符

.lazy:移除输入框时更新数据

<div id="root">
   <input v-model.lazy="msg">{{msg}}
</div>

new Vue({
    el:"#root",
    data(){
        return{
            msg:''
        }
    }
})

.number:把输入框中输入的字符串自动转换为数字

<div id="root">
   <input v-model.number="msg">{{msg}}
</div>

new Vue({
    el:"#root",
    data(){
        return{
            msg:''
        }
    }
})

.trim:去除输入框两边的空白

<div id="root">
   <input v-model.trim="msg">{{msg}}
</div>

new Vue({
    el:"#root",
    data(){
        return{
            msg:''
        }
    }
})

组件化应用构建

注：使用组件传输值，data必须是函数

data: function () {
  return {
   
  }
}

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

<div id="root">
    <ol>
        <!-- 创建一个 todo-item 组件的实例 -->
        <todo-item></todo-item>
        <todo-item></todo-item>
    </ol>
</div>

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
    template: '<li>这是个待办项</li>'
})

var app = new Vue({
    el:'#root',
})

在这里插入图片描述
props:props是单向绑定的
当父组件的属性变化时，将传导给子组件，但是反过来不会。
每次父组件更新时，子组件的所有 prop 都会更新为最新值。
不要在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
在两种情况下，我们很容易忍不住想去修改 prop 中数据：
1.Prop 作为初始值传入后，子组件想把它当作局部数据来用；
2.Prop 作为原始数据传入，由子组件处理成其它数据输出。
对这两种情况，正确的应对方式是：
定义一个局部变量，并用 prop 的值初始化它：

<div id="root">
    <ol>
        <!-- 创建一个 todo-item 组件的实例 -->
        <todo-item v-for="item in datalist" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
</div>

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
    template: '<li>{{todo.text}}</li>',
    props:['todo']
})

new Vue({
    el:'#root',
    data:{
        datalist:[
            {id:0,text:'蔬菜'},
            {id:1,text:'牛奶'},
            {id:2,text:'水果'}
        ]
    }
})