《Vue.js前端框架技术》知识点总结

最新推荐文章于 2024-01-02 12:18:05 发布

Lucky.wangju

最新推荐文章于 2024-01-02 12:18:05 发布

阅读量342

点赞数 9

文章标签：前端框架 vue.js 前端

本文链接：https://blog.csdn.net/m0_73945778/article/details/135122334

版权

1、Vue.js入门

1.1Vue.js是什么？

Vue.js（通常简称为Vue）是一款用于构建用户界面的JavaScript框架。其主要特点有：

基于标准HTML、CSS和JavaScript构建。
提供了一种声明式的、组件化的编程模型，使开发者能高效地开发用户界面。
独立于任何特定的浏览器或操作系统。
可以轻松处理大多数Web应用的场景，且几乎不需要手动优化。
目前已被广泛用于生产环境，尤其在复杂单页应用方面表现出色。

2、基础特征

2.1Vue构造选项

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例对应的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据的变化，观察和响应Vue实例上的数据变动

2.2模板语法

2.2.1常用指令

v-text

<div id="app" v-text="msg"></div>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"Hello,v-text!"
}
})
</acript>

2.v-html

<div id="app" v-html="msg"></div>
<script>
var app =new Vue({
el:"#app",
data:{
msg:"<h1>Hello,v-html!</h1>"
}
})
</script>

3.v-cloak

<style>
[v-cloak]{
display:none;
}

</style>
<div id="app" v-cloak>{{ msg }}</div>

<script>
var app=new Vue({
el:"#app",
data:{
msg:"Hello,v-cloak!"
}
})
</script>

4.v-bind

<div id="app">
<input v-bind:value="msg">
</div>

<script>
var app = new Vue({
el:"#app",
data:{
msg:"Hello,v-bind!"
}
})
</script>

5.v-on

<div id="app">
<p>{{msg}}</p>
<button v-on : click="sayHello">请单击</button>
</div>
<script>
var app= new Vue({
el:"#app",
data:{
msg:"Hi"
},

methods:{
sayHello:function(){
this.msg="Hello,v-on!"
}
}

})
</script>

2.2.2事件修饰符

事件修饰符	说明
.stop	阻止事件冒泡
.prevent	阻止默认事件
.capture	添加事件监听器时使用事件捕捉获模式
.self	将事件绑定到该元素本身，只有自身才能触发
.once	事件只触发一次

2.2.3v-model双向数据绑定

实例：

<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--引入Vue.js核心文件-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<p>文本框的内容</p>
</div>

<script>
var app = new Vue({
el:"#app"
data:{
mag:""
}

})

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

2.3计算属性与监听属性

2.3.1 computed计算属性

<div id="app">
{{msg.split(").reverse().join}}
</div>

2.3.2计算属性的缓存

computed:{
//关闭缓存，默认为trud
cache:false,
//计算属性的getter函数
reverseMsg:function(){
return this.msg.split(").reverse().join(");

}
}

2.4class与style的增强绑定

2.4.1v-bind绑定class属性

<!DOCTYPE html>
<html>
<head lang ="en">
<meta charset="UTF-8">
<title></title>

<!--引入Vue.js核心文件-->
<script scr="vue.js"></script>
<style>
.outer{
background-color:red;
width:100%;
height:200px;
}
.inner{
background-color:blue;
width:150px;
height:150px;
broder:4px solid black;
float:left;
}

.font{
color:whith;
font-weight:bolder;
}
</style>
</head>
<body>
<div id="div">
<div v-bind:class="{outer}">
outer div
<div v-bind:class="{inner}">inner div </div>
<div v-bind:class="{inner}">inenr div </div>
</div>
</div>
<scrip>
var app=new Vue({
el:"#app";
data:{
outer:"outer",
inner:"inner"
}
});
</script>
</body>
</html>

3、内置指令

3.1列表渲染指令v-for

3.1.1基本用法

v-for是Vue.js的循环语句，它的表达式需要结合着in或者of来使用，类似item in items的形式。下面通过实例循环普通语句：

实例：

<div id="app">
<ul>
<li v-for="(item,index)of fruit":key="index"
</li>
</ul>
</div>

<script>
new Vue({
el:"#app"
data:{
fruit:["苹果","梨子","香蕉","橘子"]
}
})
</script>

3.2条件渲染指令

3.2.1v-if

v-if的使用一般有两个场景。

（1)通过条件判断展示或者隐藏某个元素或者多个元素。

（2）进行视图之间交换。

实例：

<div di="app">
<ul>
<li v-for="count of 10">
这是第{{count}}次
</li>
</ul>
</div>
<script>
new Vue({
el:"app",
})
</script>

3.2.2v-show

v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样，v-show的基本使用如：

实例：

<div id="app">
<h1v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el:"app",
data:{
ol:teue
}
})
</script>

3.3 fiters过滤器

Vue.js允许自定义过滤器，过滤器的作用可被用于一些常见的文本格式化。

过滤器可以用在两个地方：

1、双花括号插值

2、v-bind表达式

实例：

<div di="app">
<p>电脑价格：{{price |addPriceIcon}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
parice:200
},
filters:{
//处理函数
addPrixceIcon (value){
console.log(value){
console.log(value)//200
return''+value
}

}

})
</script>

3.4修饰符

3.4.1按键修饰符

v-on指令用来进行事件监听（如单击事件、键盘事件）：

<div id="app">
<input v-on:keyup="counter"/>
<p>在输入框中输入了{{counter}}个字符</p>
</div>
<script>
new Vue({
el:'#app',
data:{
counter:0
}
})
</script>

3.4.2 v-model修饰符

v-model可以实现表单元素和数据的双向绑定。

v-model三个修饰符：

lazy	默认在input事件中同步输入框中内容，即一旦有数据发生变化，对应的data中数据就会自动发生变化。
number	默认情况下，在输入框中输入的内容会被当作字符串类型进行处理。
trim	trim修饰符可以去除输入内容左右两边空格。