vue的注意事项
- 想让vue工作必须要创建一个Vue实例,且要传入一个配置对象;
- root容器里的代码依然符合html规范,只不过混入 一些特殊的Vue语法;
- root容器里的代码被称为Vue模板;
- Vue实例和容器时--对应的;
- 真是开发中只有一个Vue实例并且会配合着组件一起使用;
- {{xxx}}中要写js表达式,且xxx可以自动读取data中的所有属性;
- 一旦data中的数据发生改变,并且页面中用到该书数据的地方也会自动更新;
注意分区:js表达式和js代码(语句)
表达式:一个表达式会产生一个值,可以放在任何 一个需要值的地方;
- a
- a+b
- demo( 1 )
- x==y ? ' a ' : ' b '
js代码(语句)
- if( ){ }
- for( ){ }
基本模板语法1
<!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="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>测试1:{{name}}</h2>
<h2>测试2:{{num1+num2}}</h2>
<h2>测试3:{{str?'男':'女'}}</h2>
<h2>测试4:{{demo()}}</h2>
</div>
<script>
new Vue({
el: "#root",
data() {
return {
name: "vue1",
num1: 20,
num2: 30,
str: false
}
},
methods: {
demo: function () {
return "5000"
}
},
})
</script>
</body>
</html>
基本模板语法2
<!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="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>测试1:我叫:{{name}}</h2>
<a v-bind:href="url">测试2:点击进去百度</a></a>
<h2>测试3:我叫search里面的{{search.name}}</h2>
<!-- toUpperCase()将字符转化成大写 -->
<!-- v-bind 可以简写 -->
<a :href="search.url.toUpperCase()">测试4:点击进去{{search.name}}商城</a>
</div>
<script>
new Vue({
el: "#root",
data: {
name: "张三",
url: "http://www.baidu.com",
search: {
name: "京东",
url: "https://www.jd.com"
}
}
})
</script>
</body>
</html>
数据绑定
<!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="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 单项绑定
数据只能从data流向页面
-->
<input type="text" v-bind:value="name">
<!-- 双向绑定
数据不仅可以从data流向页面也可以从页面流向data
-->
<input type="text" v-model:value="name">
</div>
<script>
new Vue({
el: "#root",
data: {
name: "jack"
}
})
</script>
</body>
</html>
备注:双向绑定一般都应用在表单元素上如 (input select)
v-model:value 可以简写成v-model 因为v-model默认收集的时value
data与le的两种写法
<!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="../js/vue.js"></script>
</head>
<body>
<div id="root1">
<h2>叫{{name}}</h2>
</div>
<div id="root2">
<h2>性别:{{sex}}</h2>
</div>
<script>
new Vue({
// el的第一种写法
el: "#root1",
// data第一种写法
data: {
name: "张三",
age: 18
}
})
var vm = new Vue({
// data第二种写法
data() {
return {
sex: "男"
}
}
})
// el的第二种写法
vm.$mount("#root2")
console.log(vm);
</script>
</body>
</html>
- Model 是html的数据
- ViewModel 是Vue实例
- View是被Vue所管理的页面(渲染出来的页面)
- DOM Listeners DOM监听
- Data Bindings 数据绑定
数据代理 Object.defineProperty("" )
基本案例
<!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="../js/vue.js"></script>
</head>
<body>
<script>
var number = 18
var person = {
name: "张三",
sex: "男"
}
console.log(person);
// age
// defineProperty() 劫持 getter 和setter 方法
Object.defineProperty(person, 'age', {
get() {
console.log("读取了");
return number
},
set(value) {
console.log("set调用le", value);
// 将获取到的值进行赋值给 number
number = value
}
})
</script>
</body>
</html>
何为数据代理 数据代理,通过一个对象代理对另一个对象中属性的操作(读/写)
<!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="../js/vue.js"></script>
</head>
<body>
<script>
// 数据代理,通过一个对象代理对另一个对象中属性的操作(读/写)
var obj1 = { x: 100 }
var obj2 = { y: 200 }
// 通过 obj2 来代理obj1.x get()读取到obj1里面的x 通过set里面的value 进行定义值在进行赋值
Object.defineProperty(obj2, "x", {
// 读取
get() {
return obj1.x
},
// 调用
set(value) {
// 通过获取到的值在进行赋值
obj1.x = value
}
})
</script>
</body>
</html>
事件处理
v-on:click 简写 @click
v-bind:herf 简写 :herf
事件的基本使用
<!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="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{name}}</h2>
<button v-on:click="setInfor1">setInfor1</button>
<button @click="setInfor2(123)">setInfor2</button>
<button @click="setInfor3">setInfor3</button>
</div>
<script>
new Vue({
el: "#root",
data: {
name: "张三"
},
methods: {
setInfor1() {
alert("sss")
},
setInfor2(num) {
// 必须要使用模板字符串拼接
// alert('第二个按钮的点击效果' + num)
alert(`第二个按钮的点击效果${num}`)
console.log(this); //指向 Vue
console.log(this.name); //张三
},
setInfor3: () => {
console.log(this); //指向 window
console.log(this.name); // 空
}
},
})
</script>
</body>
</html>
注意点:
事件修饰符
<!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="../js/vue.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background: red;
}
ul {
width: 200px;
height: 300px;
overflow: auto;
}
li {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="root">
<!-- 阻止默认事件 -->
<a v-bind:href="url" @click.prevent="showInfo1">百度一下</a>
<div class="box" @click="showbox">
<!-- 阻止事件冒泡 -->
<button v-on:click.stop="showInfo2">第一个按钮阻止事件冒泡</button></button>
</div>
<!-- 只能显示一次 -->
<button @click.once="showInfo3">第二个按钮只能显示一次</button>
<!-- capture 事件捕获模式(先触发div的效果) -->
<div class="box" @click.capture="showbox2">
<button v-on:click="showInfo4">第一个按钮事件捕获模式</button></button>
</div>
<!-- 只有event.target是当前操作的元素才触发事件 -->
<div class="box" @click.self="showbox3">
<button v-on:click="showInfo5">第三个按钮self</button></button>
</div>
<!-- wheel滚动事件 -->
<ul @wheel.passive="setInfo6">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
url: "http://baidu.com"
},
methods: {
// 组织默认事件
showInfo1() {
alert("ss")
},
// 第二个按钮
showInfo2() {
alert("点击到了第一个按钮")
},
// 第一个div盒子
showbox() {
alert("点击到了box盒子")
},
// 第三个按钮
showInfo3() {
alert("只能显示一次")
},
showInfo4() {
alert("事件捕获模式1")
},
showbox2() {
alert("第二个盒子事件捕获模式")
},
showInfo5() {
alert("我是第三个按钮")
},
showbox3() {
alert('我是第三个盒子')
},
setInfo6() {
for (var i = 0; i < 10000; i++) {
console.log("滚啊滚");
}
}
},
})
</script>
</body>
</html>