认识vue.js(一)

肥肥太郎

已于 2022-11-17 14:11:26 修改

阅读量212

点赞数

文章标签： vue.js 前端 javascript

于 2022-11-08 14:27:06 首次发布

本文链接：https://blog.csdn.net/weixin_56608347/article/details/127736940

版权

重点记忆？

1.vue是什么？

2.vue的特点?

3.Mvvm是什么？

4.多个vue实例可以吗？怎么用？

5.{{}}是什么？

6.vue的延迟挂载是什么？$mount是什么？

7.data的写法分别是？

8.什么是指令？

9.v-model作用？

10.双向绑定是什么原理？

11.v-show是什么？

12.v-bing是什么？

13.v-on是什么？

14v-for是什么？

vue是什么？

vue就是一个当下最为主流的前端框架，用于构建用户界面的渐进式JavaScript框架

渐进式：先完成最基本的功能开发应用，但是如果想开发复杂功能就可以引入各种vue插件来完成（vue是一个自底向上逐层开发的一个框架）

谁开发的

尤雨溪

vue的特点

1.组件化：实现了封装和重用，且组件间可以相互嵌套

2.轻量级：相对于其他框架，vue 学习成本低，简单易上手

3.虚拟Dom:虚拟Dom中存在diff算法，是cpu密集型运算，占用内存较少，可以提高运行效率，并压缩运行时的体积

4.vue是一个MVVM框架，数据绑定。数据单项绑定，单项指data中的值绑定到视图中但是视图中修改不会影响到data数据；双向绑定（v-model），数据发生变化会驱动视图的更新，视图更新也会驱动数据的变化。

5.单页面应用（SPA）：用户体验好，内容改变时不需要重新加载整个页面，不会进行多个html页面间的切换，服务器压力小。

MVVM

mvvm是Model-View-ViewModel的简写

M----model 数据===数据===量

V------view 视图====页面===用户可以看见的页面

Data Bindlings 数据绑定---------就是把model数据-----数据绑定----绑定到页面上

DOM Listeners dom监听----------就是view 页面的数据改变------dom监听-----反映到数据上

淘宝镜像

安装淘宝镜像（ npm服务器在国外可能会导致网速很慢导致下载失败,可以使用淘宝镜像当然不是必须要安装 ---- 如果安装了今后所有使用npm 在下载内容的时候就要把npm 变成 cnpm 剩下都一样）

npm install cnpm -g --registry=https://registry.npm.taobao.org

检查是否安装成功 cnpm -v

vue初体验

1.下载vue库文件 npm init -y （初始化） npm install --save vue@2 简写： npm i -S vue@2（下载）

2.新建html页面先把vue引用进来

3.编写如下代码

V --- view 视图==页面==用户可以看见的界面

VM --- viewModel 视图模型==用来关联数据与视图之前的桥梁 -->

<div id="demodiv">
<h1>{{text}}</h1>
<h1>{{num}}</h1>
<h1>{{obj.name}}</h1>
<h1>{{arr[4]}}</h1>
</div>

多个Vue实例

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demodiv">
<h1>{{text}}</h1>
</div>
<div id="demodivb">
<h1>{{text}}</h1>
</div>
<script>

new Vue({
el:"#demodiv",
data:{
text:"我是第一个",

}
})
new Vue({
el:"#demodivb",
data:{
text:"我是第2个",

}
})
</script>
</body>
</html>

{{}}--模板语法--双大括号赋值法

在vue中{{}}被称之为模板语法双花括号赋值法 vue数据插值。。。。作用：就是可以在双大括号中写入表达式并且展示在页面中

语法:在你想展示数据的任何位置 {{表达式}} （表达式通过计算可以返回结果的公式）

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demodiv">
<h1>{{num}}</h1>

<h1>{{num*2}}</h1>

<h1>{{bool?"你好":"你坏"}}</h1>

<h1>{{text.toUpperCase().slice(1,5)}}</h1>

</div>

<script>

new Vue({
el:"#demodiv",
data:{
num:666,
bool:false,
text:"abcdefghiaslkdjaskldhalk"
}
})

</script>

</body>
</html>

el与data的两种写法

$mount 手动挂载

Vue 的$mount()为手动挂载，在项目中可用于延时挂载（比如vue是一个渐进式的在我们使用一些负载功能的时候我们需要依赖很多后面会学到的vue插件来完成但是使用这些插件我们必须先要把这些插件先挂载之后在加载视图的关联所以在这个时候我们会用到延迟健在），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。

data函数式

<!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">

    <title>Document</title>

    <script src="./node_modules/vue/dist/vue.js"></script>

</head>

<body>

    <div id="demodiv">

        <h1>两种挂载方式</h1>

        <h1>{{text}}</h1>

    </div>

    <script>

       let v= new Vue({

                //对象式写法

            // data:{

            //     text:"我是一个变量"

            // }

            // 函数式写法

            data(){

                return {

                    text:"我是函数式变量"

})

        console.log(v);

        v.$mount("#demodiv")

    </script>

</body>

</html>

指令

什么是html标签的属性？

通过写在html开标签中的使用属性="属性值" 的这些东西可以扩展标签的功能

什么是指令？

就是在vue中给html标签添加的带有v-前缀的特殊属性（在vue中给html标签添加个一些特殊性功能属性）

v-model

作用：就是给表单元素进行数据的双向数据绑定

双向绑定

视图改变模型也会改变

模型变视图也会随之改变

语法: <标签 v-model=""值/>

<input type="text" v-model="inputval"/>

<h1>{{inputval}}</h1>

</div>

new Vue({
el:"#demodiv",
data:{
inputval:""
}
})

</script>

</body>
</html>

双向绑定的原理

在vue中基于数据劫持--数据代理与发布者订阅者模式完成的

数据劫持：数据拦截就是对data中的数据在初始化的时候监听起来(Object.defineProperty 来进行监听/代理) 当数据改变setter之后 vm就会知道在视图改变getter 他就会通知模型你要修改了模型改变了也会通知视图改变

发布者订阅者模式：就是一个一对多的关系发布者就是数据提供者订阅者就是页面展示的一个发布者可以对应无数个订阅者但是发布者改变了所有订阅者也会改变

v-show

作用：控制dom元素的显示或者隐藏 v-show的显示和隐藏是通过css的dispaly方式来控制的

语法 v-show="布尔值" true显示 false隐藏

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demodiv">
<input type="checkbox" v-model="bool"/>{{bool?"勾选了":"没勾选"}}

<h1 v-show="bool">我是站位的</h1>
</div>

new Vue({
el:"#demodiv",
data:{
bool:false
}
})

</script>

</body>
</html>

v-on

作用：就是给vue的dom绑定事件的

语法: onclick v-on:click onchange v-on:change

传统写法(写法稍微麻烦点)： v-on:你的事件不加on="函数" v-on:click=”函数“

简写写法: @你的事件不加on="函数" @click="函数"

那今后工作用哪个简写的函数传统的（想用那个用哪个）

注意：函数需要写在与el data同级位置使用methods来进行包裹

<!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">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <button v-on:click="fun()">点我触发函数</button>
            <button @click="fun()">点我触发函数简写写法</button>
        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                  
                },
                // 函数需要写在与el data同级的位置使用methods来进行包裹
                methods:{
                    fun(){
                        console.log("你好")
                    },
                    
                }
            })

        </script>


</body>
</html>

注意函数中怎么使用data数据 使用this.变量名（this指向的就是vue实例）

methods:{
fun(){
// console.log("你好")
console.log(this.text)

console.log(this._data.text);
},

}

v-for

概念：用来遍历数据生成页面内容

语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据"

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demodiv">

<ul>
<li v-for="(v,i) in arr">
{{v}}------{{i}}
</li>
</ul>
</div>

new Vue({
el:"#demodiv",
data:{
arr:["ez","Vn","MF","noc"]
},

methods:{

}
})

</script>

</body>
</html>

遍历复杂数据

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demodiv">

<ul>
<li v-for="(v,i) in arr">
{{v}}------{{i}}
</li>
</ul>

<hr/>

new Vue({
el:"#demodiv",
data:{
arr:["ez","Vn","MF","noc"],
obj:[
{name:"xixi1",age:181},
{name:"xixi2",age:182},
{name:"xixi3",age:183},
{name:"xixi4",age:184},
{name:"xixi5",age:185},
{name:"xixi6",age:186}
]
},

methods:{

}
})

</script>

</body>
</html>

key属性

可以在是用v-for的时候搭配使用他的作用就是给便利出来的dom 起个唯一的名字相当于我们的身份证号通过添加了这个key属性可以增加我们在便利展示的时候生成dom元素的效率 （key里面是唯一的不建议使用我们便利出来的下标因为如果一个页面有两次便利的话key的值就有可能相同）

v-bind 这个是初学者最容易忘记的但是很重要

概念: 就是html的属性插入变量

语法：

传统写法： v-bind:html的属性="值"

简写写法: :html的属性="值"

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demodiv">

<a v-bind:href="ahref">{{text}}</a>
<a :href="ahref">{{text}}</a>

</div>

new Vue({
el:"#demodiv",
data:{
text:"点我去百度",
ahref:"http://www.baidu.com"
}
})

</script>

</body>
</html>

v-if全家桶

v-if：就是对dom元素进行移出和添加

语法：写在开标签中 true添加 false移除

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-if</h1>
<input type="checkbox" v-model="bool"/>{{bool}}
<h1 v-show="bool">我是v-show的标签</h1>

<h1 v-if="bool">我是v-if的标签</h1>
</div>

}
})
</script>
</body>
</html>

v-else

语法：必须配合v-if使用，不能单独使用

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-if</h1>
<input type="checkbox" v-model="bool"/>{{bool}}
<h1 v-if="bool">请您登录</h1>
<h1 v-else>欢迎您尊敬的vip</h1>
</div>

}
})

</script>
</body>
</html>

v-else-if

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-else-if</h1>
<select v-model="text">
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="在吃饭">在吃饭</option>
<option value="在睡觉">在睡觉</option>

</select>

<h1 v-if="text=='吃饭'">我是吃饭的dom</h1>
<p v-else-if="text=='睡觉'">我是睡觉的dom</p>
<em v-else-if="text=='在吃饭'">我是在吃饭的dom</em>
<h2 v-else-if="text=='在睡觉'">我是在睡觉的dom</h2>
<b v-else>我什么都没有干</b>
</div>

}
})

</script>
</body>
</html>

v-if与v-show的区别

1.v-show是使用css方式对dom元素进行显示和隐藏的，在频繁切换的时候效率；更高，在初始化的时候对性能的损耗比较高

2.v-if是直接把这个dom元素移除或者添加，在频繁切换的时候效率比较低，在初始化的时候对性能损耗比较低

v-if 与v-fo能同时使用吗

当v-if与v-for不推荐同时使用，v-for具有比v-if更高的优先级，这意味着v-if将分别重复运行与每个

v-for循环中，影响速度，如果必须使用的话变成一个嵌套关系

解决方式

1.使用computed处理数据在遍历

2.使用v-show替代v-if

v-html:就是把字符串插入到页面中

</div>
</div>

}
})
</script>
</body>
</html>

v-once:一次性插值数据插入到页面中就不会被改变了

<!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">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-once</h1>
<input type="text" v-model="text">
<h1>{{text}}</h1>
<h1 v-once>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
</div>

}
})
</script>
</body>
</html>

v-text:向dom中插入文本内容，和{{}}作用一样

}
})
</script>
</body>
</html>

屏幕闪烁：当用户的设备和网络比较慢的时候就会在页面中把{{}}全部展现出来当网络恢复正常之后就突然显示OK，使用模板的语法{{}}就会出现这个问题。

解决方式：1.v-text(全部中使用v-text指令很麻烦)

2.使用v-cloak等待vue实例渲染完成之后在进行（这个指令就是防止页面加载是出现vuejs的变量名而设计）

<!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">
<title>Document</title>

<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="demoDiv" v-cloak>
<h1>v-text</h1>
<h1>{{num}}</h1>

}
})
</script>
</body>
</html>

肥肥太郎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识vue.js(一)

vue是什么？vue就是一个当下最为主流的前端框架，用于构建用户界面的渐进式JavaScript框架渐进式：先完成最基本的功能开发应用，但是如果想开发复杂功能就可以引入各种vue插件来完成（vue是一个自底向上逐层开发的一个框架）
复制链接

扫一扫