Vue2的学习1

最新推荐文章于 2024-10-05 23:15:10 发布

3分人生

最新推荐文章于 2024-10-05 23:15:10 发布

阅读量921

点赞数 25

文章标签：前端

本文链接：https://blog.csdn.net/2301_80336512/article/details/140590189

版权

1.Vue是什么？

一套用于构建用户界面的渐进式Javascript 框架

2.Vue的特点

1.采用组件化模式，提高代码复用率、且让代码更好维护,

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.使用虚拟DOM+优秀的Diff 算法，尽量复用DOM节点。

3.第一个Vue程序

初识Vue:

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;

3.root容器里的代码被称为【Vue模板】;

4.Vue实例和容器是一一对应的;

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用:

6.{{xxx}}中的xxx要写is表达式，且xxx可以自动读取到data中的所有属性

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>
    <script type="text/javascript">
        //Vue.config,Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示。
        //创建vue实例
        const x = new Vue({
            el:'#root',//e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data: {//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象。
               name:"123"
            }
        })
    </script>
</body>
</html>

4.Vue模板语法

Vue模板语法有2大类:

1.插值语法:

功能:用于解析标签体内容。

写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法:

功能:用于解析标签(包括:标签属性、标体内容、绑定事件.....)。

举例:v-bind:href="xxx”或简写为:href="xxx"，xxx同样要写js表达式且可以直接读取到data中的所有属性。

5.Vue数据绑定

Vue中有2种数据绑定的方式:

1.单向绑定(v-bind):数据只能从data流向页面。

2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。

注意:

1.双向绑定一般都应用在表单类元素上(如:input、select等)
2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值

<!--普通写法-->
单向数据绑定:<input type="text"v-bind:value="name"><br/>
双向数据绑定:<input type="text"v-model:value="name"><br/>
<!--简写 -->
单向数据绑定:<input type="text":value="name"><br/>
双向数据绑定:<input type="text"v-mqdel="name"><br/>

6.el与data的两种写法

1.el有2种写法

(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

//el的两种写法
//第一种写法
const v = new Vue({
    el:'#root'，
    data:{
        name:'尚硅谷
    }
})
//第二种写法 
v.$mount('#root')

2.data有2种写法

(1).对象式
(2).函数式

//data的两种写法
new Vue({
el:'#root',
//data的第一种写法:对象式
/* data:{
    name:'尚硅谷
    }*/
//第二种写法:函数式
data(){
    console.log('@@@',this)//此处的this是Vue实例对象
    return{
        name:'尚硅谷
    }

如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则:

由vue管理的函数一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

7.Vue中的数据代理

通过vm对象来代理data对象中属性的操作(读/写)

Vue中数据代理的好处:

更加方便的操作data中的数据

基本原理:

通过object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作(读/号)data中对应的属性。

8.Vue的事件处理

事件的基本使用:

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名;

2.事件的回调需要配置在methods对象中，最终会在vm上;

3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;

4.methods中配置的函数，都是被vue所管理的函数，this的指向是vm 或组件实例对象:

5.@click="demo”和 @click="demo($event)”效果一致，但后者可以传参;

代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <button v-on:click="click1">点击提示1</button>
        <button @click="click2($event,66)">点击提示2</button>
    </div>
    <script type="text/javascript">
        //Vue.config,Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示。
        //创建vue实例
        const x = new Vue({
            el:'#root',//e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data: {//data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象。
               name:"123"
            },
            methods: {
                click1(event){
                    alert("123");
                    console.log(event);
                },
                click2(event,a){
                    alert("456");
                    console.log(event,a);
                }
            },
        })
    </script>
</body>
</html>

Vue中的事件修饰符

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