目录
1.初识VUE,hello world
初识vue
1、想让vue工作,就必须创建一个vue实例,且要传入一个配置对象
2.root容器里的代码依然符合HTML规范,只不过混入了一些特殊的vue语法
3.root容器里的代码称为[vue模板]
4.vue实例和容器是一一对应关系。
5.真实开发中只有一个vue实例,并且会配合组件一起使用
6.{{xxx}}中的xxx要写JS表达式,且xxx可以自动读取到data中的所有属性
7.一旦data中数据发生变化,那么页面中会用到该数据的地方也会自动更新
注意区分:JS表达式bJS代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
(1)a
(2)a+b
(3)demo(1)
(4)x===y?'a':'b'
2.Js代码
(1)if(){}
(2)for(){}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<h1> hello :{{name}} 年龄:{{age}}地址:{{address}}</h1>
</div>
<script type="text/javascript">
const x = new Vue({
el:'#root', //el用于指定当前VUE实例为哪个容器服务,值通常为css选择器字符串
data:{ //data中用于存储数据,数据拱el所指定的容器去使用,值暂时先写成一个对象
name:'鑫鑫',
age:23,
address:"杭州"
}
})
</script>
</body>
2.模板语法
Vue模板有2大类
1.插值语法:
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
2.指令语法
功能:用于解析标签,(包括标签属性,标签体内容,绑定事件)
例子:v-bind:href="xxx"或简写为:href="xxx",xxx同时要写JS表达式且可以直接读取到data中的所有属性
备注:vue中有很多的指令,且形式都是v-???,此处我们只是拿v-bind举例子
<body>
<div id="root">
<h1>插值语法:</h1>
<h1>hello :{{name}} 年龄:{{age}}地址:{{address}}</h1></br>
<h1>指令语法:</h1>
<a v-bind:href="xiaomi.url.toUpperCase()">点我去{{xiaomi.name}}官网</a>
<a :href="xiaomi.url" :x="xiaomi.x">点我去{{xiaomi.name}}官网</a>
</div>
<!--创建vue实例-->
<script type="text/javascript">
const x = new Vue({
el: "#root", //el用于指定当前VUE实例为哪个容器服务,值通常为css选择器字符串
data: {
//data中用于存储数据,数据拱el所指定的容器去使用,值暂时先写成一个对象
name: "鑫鑫",
age: 23,
address: "杭州",
//二级对象
xiaomi:{
name:'小米',
url:"http://xiaomi.com",
x:"我是二级对象中的x"
}
},
});
</script>
</body>
3.数据绑定
vue中有两种数据绑定的方式
1.单项数据绑定(v-bind):数据只能从data流向页面
2.双向数据绑定(v-modle):数据不仅能从data流向页面,还可以从页面流向data
备注:
1.双向绑定一般应用在表单类元素上(如input,select等)
2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值
<body>
<!--创建一个容器-->
<div id="root">
<!--普通写法-->
单项数据绑定:<input type="text" v-bind:value="name"><br>
双向数据绑定:<input type="text" v-model:value="name"><br>
<!--简写写法-->
单项数据绑定:<input type="text" :value="name"><br>
双向数据绑定:<input type="text" model="name"><br>
<!--错误示范-->
<h2 v-model="name">v-model只能应用在表单类元素(输入类元素)上</h2>
</div>
<!--创建vue实例-->
<script type="text/javascript">
const x = new Vue({
el: "#root", //el用于指定当前VUE实例为哪个容器服务,值通常为css选择器字符串
data: {
//data中用于存储数据,数据拱el所指定的容器去使用,值暂时先写成一个对象
name: "鑫鑫",
age: 23,
address: "杭州",
//二级对象
xiaomi:{
name:'小米',
url:"http://xiaomi.com",
x:"我是二级对象中的x"
}
},
});
</script>
</body>
4.el与data的两种写法
data与el的两种写法
1.el有两种写法
(1)new Vue时放置el属性
(2) 先创建Vue实例,随后再通过vm.$mount('XXX')来指定el的值
2.data有两种写法
(1)对象式
(2)函数式
学习到组件时,data必须使用函数式
3.一个重要原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不在是vue实例了
<body>
<!--创建一个容器-->
<div id="root">
<h2>你好,{{name}}</h2>
</div>
<div id="roots">
<h2>你好,{{code}}</h2>
</div>
<!--创建vue实例-->
<script type="text/javascript">
//第一种data和el写法
const x=new Vue({
el:'#root',
data:{
name:'VUE!'
}
})
//第二种写法
const a=new Vue({
data(){
return{
code : "前端框架",
}
}
})
a.$mount("#roots");
</script>
</body>
5.MVVM模型
.MVVM模型
1.M:模型(model):data中的数据
2.V:视图(vew):模板代码
3.VM:视图模型(viewModel):vue实例对象
观察发现:
1.data中所有的属性,最后都出现在了vm身上
2.vm身上的所有的属性及vue原型上的所有属性,在vue模板都可以直接使用
6.object.defineProperty
相对于Java中的get,set函数
<body>
<script type="text/javascript">
let number = 18;
let person = {
name: "张三",
sex: "男",
};
Object.defineProperty(person, "age", {
// enumerable:true 控制属性是否可以枚举,默认值是false
// writeable:true 控制属性是否可以被修改,默认值是false
// configurable:true 控制属性是否可以被删除,默认值是false
// 当有人读取person的age属性时,getter函数就会被调用,且返回值就是age的值
get() {
console.log("有人读取age属性");
return number;
},
// 当有人修改person的age属性时,setter函数就会被调用,且会收到修改的值
set(value) {
console.log("有人修改了age属性,改为", value);
number = value;
},
});
7.数据代理
数据代理:通过一个对象代理对另一个对象中的属性的操作(读/写)
<body>
<script type="text/javascript">
let obj = { x: 100 };
let objs = { y: 200 };
Object.defineProperty(objs, "x", {
get() {
console.log("访问到了obj的x");
return obj.x;
},
set(value) {
console.log("修改了obj的x");
obj.x = value;
},
});
</script>
</body>
8.Vue中的数据代理
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作
2.vue中数据代理的好处
更加方便的操作data中的数据
3.基本原理
通过object.defineProperty()把data对象中所有属性添加到vm
为每一个添加到vm上的属性,都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性
9.事件处理
.
事件的基本使用
1.使用v-on:xxx或@xxx 绑定事件,其中xxx是事件名
2.事件的回调需要配置在method对象中,最终会在vm上
3.methods中配置的函数,不要有箭头函数,否则this就不是vm了
// 普通函数 let sum = function(a, b) { return a + b; } // 箭头函数 let sum1 = (a, b) => { return a + b; }
4.methods中配置的函数,都是被vue所管理的函数,this的指向是vue或组件实例对象
5.@click="demo"和@click="click($event,xxx)"效果一样但是后者可以传参和使用event对象
<body>
<div id="root">
<h1>前端框架——{{msg}}</h1>
<button @click="showinfo">点我提示信息(不传参)</button>
<button @click="shows($event,'非常')">点我也可以提升(传参)</button>
</div>
<!--创建vue实例 -->
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
msg: "VUE",
},
//函数抒写地方:
methods: {
showinfo() {
alert("方便快捷");
},
shows($event,value) {
alert(value + "好用");
},
},
});
</script>
</body>
10.事件修饰符
Vue中的事件修饰符(属性):
1.prevent:阻止默认事件(常用)
2.stop:终止事件冒泡(常用)
3.once:事件只触发一次(常用)
4.capture:使用事件的捕获阶段
5.self:只有event.target是当前操作的元素时才触发事件
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕
持续更新中..............