本文详细介绍了Vue.js的基础用法，包括如何导入、创建Vue实例、数据绑定、事件处理、条件和循环结构。此外，还深入探讨了计算属性、监听器、过滤器、生命周期方法以及实际案例，如动态添加、修改和删除用户操作。Vue.js简化了DOM操作，提升了用户交互体验，通过v-model、v-if/v-show等指令实现数据双向绑定和条件渲染。
首先vue.js是什么呢?
它是一个官方的说构建用户界面的一个渐进式框架，在我现在学习的vue.js看来它就是简化了document的一些操作，使用户交互的过程中的数据的处理更加方便了。
使用vue.js基本的三步：
1.导入函数类库 vue.js
<script src="./js/vue.js"></script>
2.指定vue渲染的区域 id=app ，将所有需要处理的页面全部包裹住
<div id="app">
3.创建vue对象
/*const 定义常量!!!!*/ 代表对象不可修改但是对象中的属性可以修改
const app = new Vue({
//1.指定页面渲染区域
el: "#app",
//2.定义vue对象中的属性
data: {
msg: "vue入门案例!!!",
name: "vue案例"
}
})
利用插值表达式 获取对象中的属性!!! {{这里可以输出vue data中的属性值}}
获取vue中的属性: {{msg}}----{{name}}----{{msg}}-----{{name}}
Vue常用命令
- {{属性}} : 可以写html页面的任意位置 如果vue没有解析 则展现原始标签{{属性}}
- v-text指令 只能写在 p span div li td 等展现标签中 如果没有解析完成,不会展现
- v-html指令 将数据当作标签解析
- v-pre 忽略该标签 不解析该标签 有v-pre指令的标签内部的内容不会被编译
- v-once 页面元素只渲染一次,之后无论如何改变（指的是在控制台修改元素信息） 则不影响页面信息.
- v-model 双向数据绑定
意义: 极大的减少了 用户取值赋值的过程,可以只专注于业务处理!!!
数据(属性)和页面: 属性值变化,则页面数据同步变化
页面和数据(属性): 页面数据变化,则vue中的属性同步变化 前提条件: 只能用于form表单中的框/文本框/密码框/单选/多选/下拉列表/隐藏域/文本域等…
其中用的最多的基本上是：{{属性}}，v-text（有文本输出的时候想到它），v-model（只要有框可以填数据的地方久想到它）
Vue中的对象的绑定
事件绑定关键字: v-on:click=“xxx”,可以简化成@click="XXX"的写法，用的都是简化后的写法
事件修饰符
阻止事件冒泡（@click.stop）（事件不会向上传递 就相当于两层标签内层标签的执行使用了.stop属性后就外层的标签就不会执行）
阻止默认行为（@click.prevent）相当于js原生中document中的preventDefault()操作
有默认行为的标签：form表单 action属性，a标签 href属性
按键修饰符 :@keyup.enter回车触发，@keyup.space空格触发
Vue分支结构用法：
- v-if 如果条件为真 ,则展现标签 如果条件为假, 则不展现标签
- v-else 功能与v-if相反
- v-else-if
- v-show 适用于频繁展现/不展现的数据
Vue循环
vue中的for循环 根据属性循环遍历 展现标签
语法:<p v-for="item in names">{{item}}</p>
遍历数组
<p v-for="item in names">{{item}}</p>
<!--
1.其中的参数至于位置有关
参数1: 代表遍历的数据
参数2: 代表遍历的索引值
-->
<p v-for="item,index in names">{{index}}~~~{{item}}</p>
遍历对象
<div v-for="value,key,index in user">
{{index}}~~{{key}}~~{{value}}
</div>
遍历集合
<div v-for="user in list">
{{user.id}}--{{user.name}}
</div>
Vue-表单操作
表单修饰符
number : 将数据转化为数值 （如果想要将输入的数据当数值类型进行计算的化不仅仅需要将将类型改为nunber，并且需要v-model.number进行数值类型转换，因为类型只能控制输入计算的时候数据还是字符串类型）
主要功能将字符串转化为数值类型
该属性不能控制用户输入什么!!!
如果用户先输入字母后输入数字,则整体是字符串类型
如果用户先输入数字,后输入字母, 则字母无效当作数值类型.
trim: 去掉开始和结尾的空格
lazy: 将input事件 切换为change事件
Vue高级-计算属性
计算属性
前提: 在vue中如果某些计算的结果需要被多次使用.如果采用函数的方式进行定义,则该函数会被调用多次 影响浏览器性能.
- 计算属性: 可以将重复的内容放到计算属性中 当作缓存使用
计算属性和函数的区别
位置不同 ：函数是在methods关键字中 - 计算属性是在computed关键字中 >调用次数不同：每调用一次函数,则执行一次调用多次计算属性, 只执行一次.
调用方式不同 ：函数需要写括号 xxxx() 计算属性只写名称即可 xxxxx
Vue高级-监听器
关键字: watch
监听的属性: data中的属性
监听器的工作原理: 主要用户的属性数据发生变化,则会触发监听器.
代码实例：
<div id="app">
信息：<input type="text" name="msg" v-model.lazy="msg">
</div>
<script>
const app = new Vue({
el:"#app",
data:{
msg:""
},
methods:{
},
watch:{
msg(value){
if(value === "行动"){
alert("盯你很久了，现在抓你")
}else{
console.log(value)
}
}
}
})
</script>
Vue高级----过滤器 ：
说明：如果需要对vue中的属性数据进行格式化操作.则建议使用过滤器
语法：
//Vue.filter("过滤器名称","过滤器的动作!!")
Vue.filter("upper",function (value) {
//value表示 需要被过滤的内容
return value.toUpperCase()
})
使用:
{{msg | uppe}} 级联用法 {{msg | uppe | xxxx | xxxxx}}
Vue高级----Vue的声明周期
对象的生命周期步骤
创建
初始化
使用对象
销毁对象
VUE对象的生命周期说明
创建
beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created
标志着Vue对象创建成功!!! 在实例创建完成后被立即调用
初始化
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
标志着VUE对象渲染页面成功
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
使用对象
beforeUpdate
：数据更新时调用，发生在虚拟 DOM 打补丁之前
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用对象。
销毁对象
beforeDestroy ：
实例销毁之前调用。在这一步，实例仍然完全可用
destroyed ：
实例销毁后调用。
最后放一个vue写的小案例和代码：
使用vue.js实现用户的动态添加修改和删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE课堂案例</title>
<!--1.导入函数类库-->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h3 align="center">动态表格</h3>
<table id="tab1" width="65%" border="1px" cellspacing="0" cellpadding="0" align="center">
<tr>
<th>序号</th>
<th>用户</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr align="center" v-for="item,index in userList">
<td v-text="item.id">100</td>
<td v-text="item.name">张三</td>
<td v-text="item.sex">男</td>
<td>
<button @click="getUser(item,index)">修改</button>
<button @click="deleteUser(index)">删除</button>
</td>
</tr>
</table>
<h3 align="center">新增用户</h3>
<table width="25%" border="1px" cellspacing="0" cellpadding="0" align="center">
<tr align="center">
<td>序号</td>
<td>
<input name="id" type="number" v-model.number="addUser.id">
</td>
</tr>
<tr align="center">
<td>姓名</td>
<td>
<input name="name" type="text" v-model="addUser.name">
</td>
</tr>
<tr align="center">
<td>性别</td>
<td>
<input name="sex" type="text" v-model="addUser.sex">
</td>
</tr>
<tr align="center">
<td colspan="2">
<button @click="addUserBtn">添加用户</button>
</td>
</tr>
</table>
<h3 align="center">修改用户</h3>
<table width="25%" border="1px" cellspacing="0" cellpadding="0" align="center">
<tr align="center">
<td>序号</td>
<td>
<input name="id" type="number" v-model.number="updateUser.id">
</td>
</tr>
<tr align="center">
<td>姓名</td>
<td>
<input name="name" type="text" v-model="updateUser.name">
</td>
</tr>
<tr align="center">
<td>性别</td>
<td>
<input name="sex" type="text" v-model="updateUser.sex">
</td>
</tr>
<tr align="center">
<td colspan="2">
<button @click="updateUserBtn">修改用户</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
//userList: userList
userList: [], //根据生命周期函数 初始化集合信息 所以定义为数组结构
addUser: {
id: '',
name: '',
sex: ''
},
updateUser: {
id: 1005,
name: '小乔',
sex: '女',
index: 0
}
},
created(){
this.initList()
},
methods: {
initList(){
//初始化数据
//动态的获取数据库信息
for(let i=0;i<11;i++){
let user ={id:100+i,name:"孙尚香"+i,sex:"女"}
this.userList.push(user)
}
this.userList.push(user)
}
},
addUserBtn(){
//将用户输入的信息 追加到list集合中
this.userList.push(this.addUser)
//新增成功之后,应该清空addUser 初始化一个空对象 切记!!!!
this.addUser = {}
},
getUser(item,index){
//console.log(item)
//console.log(index)
this.updateUser = item
this.updateUser.index = index
console.log(this.updateUser)
},
updateUserBtn(){
//根据下标替换原始数据
let index = this.updateUser.index
//替换
//this.userList.splice("起始位置下标","操作元素数量","替换后的值")
this.userList.splice(index,1,this.updateUser)
this.updateUser = {}
//console.log(this.userList)
},
deleteUser(index){
//询问用户是否删除
let flag = confirm("你确定删除数据吗?")
if(flag){
this.userList.splice(index,1)
}
}
}
})
</script>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
