vue.js学习笔记
1.引入vue.js
<!-- 开发环境版本，包含了有帮助的命令行警告 2.0-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
//实例化vue
new Vue({
//挂载目标
el: '#app',
//父组件数据对象
data: {
},
//钩子函数 页面一加载就调用
created(){
},
//注册子组件
// 显示设置模板
template: `<div></div>`
})
</script>
</body>
</html>
3.vue-插值表达式
插值表达式: 小胡子语法 {{}}
缺点:会存在页面闪烁
解决方案：
1. 给指定的元素添加v-cloak指令并设置隐藏样式 display: none
2. 当vue引入成功之后，会自动的删除v-cloak，同时数据也解析完毕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-cloak> {{msg}}</h1>
<!-- v-text 原样输出，不会解析html,即文本text输出-->
<h1 v-text="msg1"></h1>
<!-- v-html 会解析 html 再输出 -->
<h1 v-html="msg1"></h1>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: '第一次使用vue',
msg1: '<mark>第一次使用vue</mark>'
}
})
</script>
</body>
</html>
4.vue-属性绑定
1.对象-数组 写法
<div v-bind:class="">等同于<div :class="">(缩写)
1.对象写法
<div :class="{active:isflag,red:noflag}">你好</div> 结果为:<div class="active>你好</div>
2.数组写法
<div :class="[isflag?'active':'',noflag?'red':'']">你好</div> 结果为:<div class="active>你好</div>
组件
data: {
isflag: true,
noflag:false,
}
2.双向传值
<div id="app">
{{msg}}
<!-- 双向数据绑定手动模拟 -->
<input type="text" :value="msg" @input="getValue">
<!-- v-model只能使用在表单和组件上 -->
<!-- <input type="text" v-model="msg"> -->
<!-- <button @click="getValue">getValue</button> -->
</div>
<script>
new Vue({
el: "#app",
data: {
msg: 'hello vue',
},
methods: {
getValue(e) {
// console.log(this.msg)
// console.log(e.target.value)
this.msg = e.target.value
}
}
})
// vue里面的数据流
// 单向数据绑定： model改变，view跟着改变，不能反过来
// 双向数据绑定： model改变，view跟着改变，反之亦然
5.事件绑定
<button v-on:click="">等同于<button @click="">(缩写)
<div id="app">
<button @click="click(1)"></button>
</div>
new Vue({
el: "#app",
data: {
},
methods: {
click(e) {
console.log('e')
}
}
})
点击按钮,控制台打印 1
事件修饰符
1.点击修饰符
stop 防止事件冒泡,点击后只触发子节点.
prevent 取消默认事件
比如页面的<a href="#">标签，当用户点击时，通常在浏览器的网址列出#：
.capture 触发从外至内 触发父节点-->子节点的点击事件
once 只触发一次
.self 只会触发自己范围内的事件，不会包含子元素。
2.鼠标修饰符
.left：鼠标左键
.middle：鼠标中间滚轮
.right：鼠标右键
3.键盘修饰符
.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键
<div id="app">
<button @keyup.enter="enter"></button>
</div>
6.钩子函数
7.v-for,v-if,v-show
1.v-if和v-show
1. v-show 和 v-if的区别
v-show 是通过控制元素的样式 进行显示隐藏
v-if 是通过js操作DOM的添加和删除
2. 使用场景
如果频繁操作 建议使用v-show
如果做流程控制建议使用 v-if
2.v-for
<div id="app">
<h2>遍历数组</h2>
<p v-for="(item,index) in arr">
值为： {{item}} --- 索引为： {{index}}
</p>
<h2>遍历数组对象</h2>
<p v-for="(item,index) in arrObj">
id为：{{item.id}}---
值为：{{item.name}} ---
索引为： {{index}}
</p>
<h2>遍历对象</h2>
<p v-for="(value,key,index) in obj">
{{value}} --- {{key}} --- {{index}}
</p>
<h2>遍历数字-从1开始到指定的数值</h2>
<p v-for="(count,index) in 8">
{{count}} --- {{index}}
</p>
</div>
<script>
new Vue({
el: "#app",
data: {
arr: ['张三', '李四', '王五'],
arrObj: [
{
id: 0,
name: '张三'
},
{
id: 1,
name: '李四'
},
{
id: 2,
name: '王五'
}
],
obj: {
name: '张三',
age: 18,
sex: "男"
}
}
})
</script>
