1.vue是什么?
vue是一套用于构建用户界面的渐进式javascript框架,自底向上逐层的应用
vue的特点:
1.采用组件化模式,提高代码复用率,且让代码更好维护
2.声明式编码,让编码人员无需直接操作DOM,提高开发效率
3.使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
学习vue之前要掌握的js基础知识:
es6语法规范,ES6模块化,包管理器,原型,原型链,数组常用方法,axios,promise…
去除下列的vue提示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wglHRvGp-1629187557445)(C:\Users\ltting\AppData\Roaming\Typora\typora-user-images\image-20210817094016693.png)]
<script type="text/javascript">
Vue.config.productionTip = false //vue全局配置:productionTip设置为 false 以阻止 vue 在启动时生成生产提示。
</script>
初识vue
1.创建一个容器和vue实例(new Vue()),且要传入一个配置对象(如el、data)
2.容器里面的代码依然符合html规范,只是混入了一些特殊的vue语法
3.容器里面的代码被称为vue模板
4.容器和实例的关系的一对一的
5.实际开发中只有一个vue实例,并且配合着组件一起使用
6.插值表达式(插值语法,{{}})中要写js表达式,而且要是vue实例的data中的属性
7.一旦data中的数据发生改变,在模板中与之对应的地方也会自动更新
<!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>
<!-- 引入开发版本的vue.js文件 -->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello,{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
// vue是一个方法,里面是以键值对存在的
new Vue({
// 用于指定当前vue实例在哪个容器显示,值通常为css选择器字符串
el: "#root",
// data用于存储数据,数据供el所指定的容器去使用
data: {
name: "张三"
}
})
</script>
</body>
</html>
vue模板语法有2大类
1.插值语法:
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式,也可以是vue实例的配置对象data中的某个属性
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
举例:v-bind:href="xxx"或简写为:href=“xxx”,xxx同样可以是js表达式,也可以是data中的某个属性
<!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">
<a v-bind:href="url">{{name}}</a>
<a :href="url">{{name}}</a>
</div>
<!-- v-bind:属性绑定,简写就是——: -->
<script>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: "张三",
url: "https:/www.baidu.com"
}
})
</script>
</body>
</html>
vue中有2中数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面(页面中的数据可以根据data的改变而改变,但是页面中的数据发生改变时,data中的属性值不会跟着改变)
2.双向绑定(v-model):页面中的数据和data中的数据是实时对应的,一方改变了另一方也跟着改变
注意:
1.双向绑定一般应用于表单类元素上(如input、select等)
2.v-model:value可以简写成v-model,因为v-model默认收集的就是value值
<!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">
<!-- 属性绑定(单向) -->
<!-- <input type="text" v-bind:value="text"> -->
<!-- 双向绑定:v-model只能应用于表单类元素,有value值,可以输入 -->
<!-- <input type="text" v-model:value="text"> -->
<input type="text" :value="text">
<input type="text" v-model="text">
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: "张三",
text: "数据绑定"
}
})
</script>
</body>
</html>
data和el的两种写法:
1.el
1.1在new Vue()里面配置el属性
1.2先创建vue实例,随后再通过vue实例.$mount(“容器”)指定el的值
2.data
2.1对象式
2.2函数式
注意:在使用组件时,data必须使用函数式,使用对象式会报错
3.提示:由vue管理的函数一定不要写箭头函数,一旦写了箭头函数,它的this指向的就不是vue实例而是window了(因为箭头函数没有this,只能往外找,到window)
<!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">
<h1>{{name}}</h1>
<span>{{text}}</span>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 挂载容器的1.0写法:el
// el: "#root",
// data的1.0写法:对象式
/* data: {
name: "张三",
text: "数据绑定"
} */
// data的2.0写法:函数式,必须要用return返回,在用到组件时,就要用函数式的data
/* data: () => {
// 这里的this指向window,因为箭头函数没有自己的this就向外找,就到了window,所以data不要使用箭头函数形式
console.log(this);
}, */
data() {
// 这里的this是vue实例对象
console.log(this);
return {
name: "张三",
text: "数据绑定"
}
}
})
// 前面有$符号的就是可用的属性,不带$符号的是底层的属性,不能使用
// console.log(vm);
// console.log(vm.__proto__ == Vue.prototype); //true
// 挂载的2.0写法:$mount方法
// $mount不是vue实例vm的方法,而是它的原型上的方法
// vm.$mount("#root");
// 1000ms之后,再将vue实例挂载到指定的容器上
setTimeout(function() {
vm.$mount("#root");
}, 1000)
</script>
</body>
</html>
// $mount不是vue实例vm的方法,而是它的原型上的方法
// vm.$mount("#root");
// 1000ms之后,再将vue实例挂载到指定的容器上
setTimeout(function() {
vm.$mount("#root");
}, 1000)
</script>
```