Vue学习基础版汇总
1.Vue简介
1.1.Vue概念
- 是一套用于构建用户界面的前端框架。
1.2.Vue特性
-
数据驱动视图
- 使用vue的页面，vue会监听数据的变化，从而自动重新渲染页面的结构，如下图：
- 优点：
- 当页面数据发生变化时，页面会自动重新渲染。
- 数据驱动视图是单向的数据绑定
- 使用vue的页面，vue会监听数据的变化，从而自动重新渲染页面的结构，如下图：
-
双向数据绑定
- 在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中，如下图：
- 优点：开发者不需要手动操作DOM元素，来获取表单元素最新的值！
- form表单负责采集数据，Ajax负责提交数据。
- 在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中，如下图：
1.3.MVVM原理
1.3.1.概述
- MVVM是vue实现数据驱动视图和双向数据绑定的核心原理，指的是Model、View和ViewModel，把每个HTML页面拆分成了这三个部分
- Model：表示当前页面渲染时所依赖的数据源。
- View：表示当前页面渲染的DOM结构。
- ViewModel表示vue的实例，它是MVVM的核心。
1.3.2.工作原理
-
ViewModel作为MVVM的核心，是它把当前页面的数据源(Model)和页面的结构(View)连接在了一起。
-
当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构。
-
当表单元素的值发生变化时，也会呗VM监听到，VM会把变化过后最新的值自动同步到Model数据源中。
2.Vue基本使用
2.1.三步使用Vue
-
导入vue.js的script脚本文件。
-
在页面中声明一个将要被vue所控制的DOM区域。
-
创建vm实例对象(vue实例对象)
- 创建源码示例：
<body> <!--2.在页面中声明一个将要被 vue 所控制的DOM区域--> <div id="app"> {{username}} </div> <!--1.导入 vue.js 的script 脚本文件--> <script src="./lib/vue-2.6.12.js"></script> <script> <!--3.创建 vm 实例对象--> const vm = new Vue({ <!--3.1指定当前vm实例要控制页面的那个区域--> el:'#app', <!--3.2指定 Model 数据源--> data: { username: 'douglas' } }) </script> </body> -
基本代码与MVVM的对应关系
3.Vue指令与过滤器
3.1.指令
-
【概念】是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
-
【指令分类】按照不同的用途分为6大类：
3.1.1.内部渲染指令
-
【作用】用来辅助开发者渲染DOM元素的文本内容，常用的渲染指令如下：
-
v-text
- 【语法】
<!--把username对应的值，渲染到第一个p标签中--> <p v-text="username"></p> <!-- 把gender对应的值，渲染到第二个p标签中--> <!--注意：默认的文本“性别”会被gender的值覆盖掉--> <p v-text="gender">性别</p>- 【缺点】会覆盖原本标签内的默认值内容
-
{{}}
- 【作用】
- 专门用来解决v-text会覆盖默认文本内容的问题，这种{{}}语法专业名称是插值表达式。
- 【语法】
<!--使用 {{}} 插值表达式，将对应的值渲染到元素的内容节点中--> <!--同时保留元素自身的默认值--> <p>姓名：{{username}}</p> <p>性别：{{gender}}</p> - 【作用】
-
v-html
- 【作用】
- 专门用来渲染包含HTML标签的字符串内容，将内容渲染为页面的HTML元素。
- 【语法】
<!--假设 data中定义了名为discription的数据，值为包含html标签的字符串--> <!-- '<h5 style="color:red;">I Love You</h5>'--> <p v-html="discirption"></p> - 【作用】
-
-
【小结】
- v-text：指令的缺点：会覆盖元素内部原有的内容！
- {{}}：插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
- v-html:可以把带有标签的字符串，渲染成真正的HTML内容！
3.1.2.属性绑定指令
- 【作用】如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。
- 【语法】给placeholder属性动态绑定变量tips值
<input type="text" v-bind:placeholder="tips">
<image v-bind:src="photo" alt="" style="width:150px;"/>
-
【注意】v-bind:可以简化使用冒号可替代":"
-
【使用JS表达式】
- Vue渲染中除了支持绑定简单的数据值之外，还支持JS表达式的运算，例如：
{{ number + 1}} //插值表达式变量计算 {{ number > 99 ? '是' : '否'}} //插值表达式支持三元运算符 {{ message.split('').reverse().join('') }} //插值表达式支持字符串切割并且翻转 //在使用v-bind属性绑定期间，可以对内容进行动态拼接，则字符串应该用单引号包裹 <div v-bind:id=" 'name-' + id "></div>
3.1.3.事件绑定指令
- 【作用】v-on事件绑定指令，用来监听DOM元素绑定事件。
- 【语法】v-on:事件名称=“事件处理函数的名称”
<h3>count的值为:{{count}}</h3>
<!--给button按钮绑定一个事件,并且可在事件内进行传参-->
<button v-on:click="addCount(1)">点我count加1哟</button>
<!--在vm中的methods模块中，编写addCount事件执行函数体-->
methods:{
addCount:function(n){
this.count++;
}
}
-
【注意】v-on可简写为’@’
-
【拓展】原生态DOM对象有onClick、oninput、onkeyup等原生事件，在vue绑定事件之后均可为：
- v-on:click、v-on:input、v-on:keyup
【内置变量传参】$event
- vue提供了内置变量，名字叫做$event,它就是原生的DOM的事件对象e
- 【案例】点击按钮改变数值同时也改变按钮的背景色
<div id="app">
<h3>Count的值为：{{count}}</p>
<button @click="addCount(3,$event)">每点我一次Count都要加3</button>
<button @click="subCount(1)">点击我每次减掉1</button>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
count:0
},
methods:{
addCount:function(n,e){
this.count +=n;
if(this.count % 2 === 0){
e.target.style.backgroundColor = 'green';
}else{
e.target.style.backgroundColor = 'red';
}
},
subCount(n){
this.count -=n;
}
}
})
</script>
【事件修饰符】
- 在事件处理函数中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求；
- vue提供了时间修饰符概念，对事件的触发进行控制。
- 【案例1】阻止点击事件跳转链接
- 阻止默认行为(防止a链接的跳转，阻止表单的提交等)
<!--触发click点击事件时，阻止a链接的默认跳转行为-->
<a href="http://www.baidu.com" @click.prevent="show">点击跳转百度</a>
- 【案例2】阻止事件冒泡
<button @click.stop="show">百度一下</button>
【按键修饰符】
- 【作用】在监听键盘事件时，需要判断详细的按键，可以为键盘相关的事件添加按键修饰符。
- 【案例1】只有在key是Enter 时调用vm.submit()如下：
<input @keyup:enter="submit">
- 【案例2】只有在key是Esc 时调用vm.clearInput()如下：
<input @keyup.esc="clearInput">
<!--通过内置变量$event获取输入的值-->
methods:{
clearInput(e){
e.target.value = '';
}
}
3.1.4.双向绑定指令
-
【作用】vue提供v-model双向数据绑定指令，用来快速获取表单的数据
-
【使用】可以使用v-model指令的标签有
- input输入框
- textarea
- select
-
【案例】
<div id="app">
<p>用户名是：{{username}}</p>
<input type="text" v-model="username"/>
<p>选中的省份是：{{provinceName}}</p>
<select v-model="province">
<option value="">请选择</option>
<option value="1">北京</option>
<option value="2">克拉玛依</option>
<option value="3">湖北</option>
</select>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
username:"douglas",
province:2
},
motheds:{
}
})
</script>
- 【v-model专用修饰符】方便对用户输入的内容进行处理
3.1.5.条件渲染指令
- 【作用】按需要控制DOM的显示与隐藏
- v-if 每次动态创建或移除元素，实现元素的显示和隐藏
- v-else-if 必须配合v-if指令一起使用，否则将不会被识别。
- v-else
- v-show 动态为元素添加或移除display:none样式,来实现元素的显示和隐藏
- v-if 每次动态创建或移除元素，实现元素的显示和隐藏
- 【案例】
<div id="app">
<p v-if="networkState === 200">请求成功---v-if</p>
<p v-show="networkState === 200">请求成功---v-show</p>
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
</div>
3.1.6.列表渲染指令
- 【语法】v-for列表渲染指令，基于一个数组来循环渲染一个列表结构
- 需要使用item in items形式的特殊语法
- items是待循环的数组
- item是被循环的每一项
- 需要使用item in items形式的特殊语法
- 【案例】
<ul>
<li v-for="item in items">姓名是：{{item.name}}</li>
</ul>
data:{
list:[
{id:1,name:'DG'},
{id:2,name:'FF'}
]
}
-
【v-for中的索引】
- v-for指令还支持一个可选的第二个参数，即当前项的索引。
- 【语法】 （item,index）in items
- 【案例】item项与index索引都是形参，可以根据需要进行重命名
<ul> <li v-for="(item,index) in items">索引是：{{index}}，姓名是：{{item.name}}</li> </ul> -
【注意】只要用到了v-for指令，就必须绑定一个:key属性
- 且尽量使用id作为key的值,且不能重复！！！（唯一性）
- key的值类型必须是：字符串或数字类型
<tr v-for="(item,index) in list" :key="item.id"> <td>{{index}}</td> <td>{{item.id}}</td> </tr>
4.案例
- 【实现vue的增删功能】源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<div id="app">
<form @submit.prevent="add">
<div class="card">
<div class="card-header">
<input type="text" placeholder="请输入汽车名称" v-model.trim="name">
<button type="submit">添加</button>
</div>
</div>
</form>
<table class="table table-bordered table-hover table-striped">
<thead>
<th>索引</th>
<th>id</th>
<th>姓名</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{index + 1}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<a href="javascript:;" @click="remove(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"DG"},
{id:2,name:"FF"}
],
name:"",
nextId:3
},
methods:{
remove(id){
console.log(id)
this.list = this.list.filter(item => item.id !== id)
},
add(){
if(this.name === ''){
alert("请填写名称！")
return
}
console.log(this.name)
//1.构建需要添加的对象
const obj = {
id:this.nextId,
name:this.name,
}
//2.添加数据到list数组
this.list.push(obj)
//3.清空输入框内容
this.name = ''
//4.设置下一个id加一
this.nextId += 1;
}
}
})
</script>
</body>
</html>
1266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
