一、JavaScript
1、原型,原型链深入
当你修改obj.name 时,修改的是原型中的值,当你重新附值给obj时(obj={name:‘b’}),相当于重新定义了obj这个变量;
换个理解方式为,obj.name 是一个指针,而obj 是一个变量;
二、vue
1、安装方式
1.1CDN引入
开发阶段使用开发版本
发布项目使用生产版本。(优化尺寸,下载更快,节省用户流量)
2.2下载和引用
2.3NPM安装(学习脚手架之后)
2、脚手架
vue CLI是一个官方发布的一个vue.js项目脚手架。
CLI(命令行界面,俗称脚手架):Command-Line Interface
3、vue初识
let(变量)/const(常量)
3.1编程范式:声明式编程
就是当我的这个实例帮你去管理div的时候,你只需要告诉我{{message}}
写什么东西就可以了。
<body>
<div id="app">{{message}}</div>
<!-- 要显示下面的数据 -->
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app', //用于要挂载要管理的元素
data: {
//定义数据
message: '你好啊'
}
})
</script>
</body>
原始js做法(编程范式:命令式编程)就是一步一步告诉你怎么做。
-
创建div元素,设置id属性
-
定义一个message变量
-
将message变量放在前面的div元素中显示。
-
修改message数据:今天天气不错!
-
将修改后的数据再次替换到div元素中----而用声明式编程改掉message属性值,界面会自动跟着改。
3.2替换h2
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<!-- 要显示下面的数据 -->
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app', //用于要挂载要管理的元素
data: {
//定义数据
message: '你好啊'
}
})
</script>
增加数据属性
<body>
<div id="app">
<h2>{{message}}</h2>
<h1>{{name}}</h1>//显示sz
</div>
<!-- 要显示下面的数据 -->
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app', //用于挂载要管理的元素 ,告诉vue实例你以后帮我管理
data: {
//定义数据
message: '你好啊',
name: 'sz'
}
})
</script>
</body>
这样做可以完全做到,数据和我们的界面完全分离。处理数据都在固定地方,界面也是。
vue的响应式:当数据发生改变时,界面会自动发生一个响应,页面会跟着改。
4、vue列表的展示
var-for用法,
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
<!-- item是变量 -->
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
}
})
</script>
</body>
上面数据也是响应式的
展示列表的时候,就用这种方式展示就可以了。
三、Daily English
encapsulate:封装