1、vue的前世今生
在vue之前,有angular、react前端框架,vue算是后起之秀。
2013年 【中】尤雨溪
大佬的GitHub主页 ^_^
gigyyx990803 (Evan You) (github.com)https://github.com/yyx990803
2、vue的特点
组件化
一个.vue文件就是一个组件,包括HTML、css、js。
提高代码复用率,代码更好维护。
声明式编码
无需直接操作DOM,与原生js命令式编码对应。
虚拟DOM
3、vue2.x学习
vscode 中 live server插件
一个具有实时加载功能的小型服务器,可以使用它来破解html/css/javascript,但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
01-初识vue
想让vue工作,必须创建一个vue实例,在{ }中传入一个配置对象。
root容器中的代码仍然符合HTML规范,只不过加入了一些特殊的vue语法。
root容器中的代码被称为【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>初识vue</title>
<!--引入vue-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> -->
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>hello,{{name}}</h1>
<h1>你几岁了?{{age}}</h1>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
//没有这段代码,会显示成产模式的消息,当前为开发模式
//在火狐浏览器一切正常,在谷歌不起作用???不知道为啥
Vue.config.productionTip = false
//创建vue实例
//{***} vue实例中的配置对象
const a = new Vue({
//element,当前vue实例为哪个容器服务,css选择器
el:'#root',
//data中存储数据,数据供el中指定的容器使用
data: {
name:'vue',
age:18
}
})
</script>
</body>
</html>
el选项中,css选择器与容器不对应的情况
①一个实例,找到了多个容器
<body>
<!-- 准备一个容器 -->
<div class="root">
<h1>hello,{{name}}</h1>
<h1>你几岁了?{{age}}</h1>
</div>
<div class="root">
<h1>hello,{{name}}</h1>
<h1>你几岁了?{{age}}</h1>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
//没有这段代码,会显示成产模式的消息,当前为开发模式
//在火狐浏览器一切正常,在谷歌不起作用???不知道为啥
Vue.config.productionTip = false
//创建vue实例
//{***} vue实例中的配置对象
const a = new Vue({
//element,当前vue实例为哪个容器服务,css选择器
el:'.root',
//data中存储数据,数据供el中指定的容器使用
data: {
name:'vue',
age:18
}
})
</script>
</body>
结果:
②一个容器,多个实例
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>hello,{{name}}</h1>
<h1>你几岁了?{{age}}</h1>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
//没有这段代码,会显示成产模式的消息,当前为开发模式
//在火狐浏览器一切正常,在谷歌不起作用???不知道为啥
Vue.config.productionTip = false
//创建vue实例
//{***} vue实例中的配置对象
const a = new Vue({
//element,当前vue实例为哪个容器服务,css选择器
el:'#root',
//data中存储数据,数据供el中指定的容器使用
data: {
name:'vue',
age:18
}
})
const b = new Vue({
//element,当前vue实例为哪个容器服务,css选择器
el:'#root',
//data中存储数据,数据供el中指定的容器使用
data: {
name:'vue2.0',
age:3
}
})
</script>
</body>
结果:
③总结
一个容器只能对应一个vue实例。
实际开发中只有一个实例,并且会配合着组件一起使用。
一旦data中的数据发生变化,模板中用到该数据的地方也会自动更新。
区分js表达式和js代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1) 函数调用表达式
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){ }
(2). for(){ }
浏览器端使用开发者工具动态修改数据