vue是什么
vue是一套构建用户界面的渐进式JavaScript框架。
什么是渐进式
vue可以自底向上逐层的使用。
比如:
简单应用:只需要一个轻量小巧的核心库。
复杂应用:可以引入各式各样的Vue插件。
vue的特点
1.采用组件化模式,提高代码复用率、且让代码更好维护。
2.声明式编码,让编码人员无需直接操作DOM,提高开发效率。
3.使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。
搭建vue开发环境
1.下载vue.js(开发版)、vue.min.js(生产环境版)
2.html中引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>初识vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
</body>
</html>
3.去掉devtools提示
正常来说,安装devtools插件即可去掉devtools提示,但是当前devtools版本(现在时间2024.04.01)有bug,解决方法如下:
1.使用旧版本的devtools,比如5.3.4亲测可行。
2.注释掉vue.js:9346那行代码的提示输出信息。
3.不用管它。
4.去掉productionTip提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>初识vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
//阻止 vue 在启动时生成生产提示。无效,应该是vue版本的问题,可以通过修改vue.js中productionTip属性为false的方式阻止提示。
Vue.config.productionTip = false;
</script>
</html>
但是当前版本(现在时间2024.04.01)存在这个设置无效的问题。解决方法:
1.vue.js中搜索productionTip属性,将其设置为false即可。
2.不用管它。
Vue的hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>Hello, {{name}}</h1>
</div>
</body>
<script type="text/javascript">
//阻止 vue 在启动时生成生产提示。无效,应该是vue版本的问题,可以通过修改vue.js中productionTip属性为false的方式阻止提示。
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
el: '#root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
data: { //data中用于存储数据,数据供el所指定的容器使用。值暂时写成一个对象。
name: 'leco'
}
});
</script>
</html>
小结:
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
注意区分:js表达式 和 js代码(语句)
- 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’ - js代码(语句)
(1). if(){}
(2). for(){}
Vue模板语法
Vue模板语法有两大类:
1.插值语法:
功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。
举例:v-bind:href=“xxx” 或 简写为 :href=“xxx”,xxx同样要写js表达式,
且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令语法,且形式都是:v-???,此处我们只是拿v-bind举个例子。
数据绑定
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
备注:
1.双向绑定一般都应用在表单类元素上(如:input、select等)
2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例,随后再通过vm.$mount(‘#root’)指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择:简单使用哪种写法都可以,使用组件时,data必须使用函数式,否则会报错。
3.一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
Vue中的MVVM模型
MVVM模型
M:模型(Model) :data中的数据
V:视图(View) :模板代码
VM:视图模型(ViewModel):Vue实例
Vue对象的结构
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。