vue框架学习
day1
1.1. 基础知识：
1.前端工程化
- 小白前端开发：
- 会写html + css + Javascript
- 美化页面就拽一个bootstrap
- 需要操作DOM或发起Ajax请求，就拽一个jQuery
- 快速实现页面布局，拽一个Layui
- 实际前端开发：
- 模块化（js，css，资源模块化）
- 组件化（复用现有的UI结构，样式，行为）
- 规范化（目录，编码规范，git分支管理）
- 自动化（自动构建，不熟，测试）
什么是前端工程化：在企业级的前端项目开发中，把前端开发所需要的工具，技术，流程，经验等进行规范化
2.webpack基本用法
处理浏览器端js的兼容性问题
1.2. 初识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 src="../js/vue.js"></script>
</head>
<body>
<!--
初识Vue:
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.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码（语句）
(1). if(){}
(2). for(){}
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>Hello, {
{name}},{
{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示
// 创建Vue实例
new Vue({
el:'#root', // el用于制定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{
//data中用于存储数据，数据供 el 所指定的容器去使用，值我们暂时先写成一个对象
name:'world123',
address:'北京'
}
})
</script>
</body>
</html>
1.3模版语法
插值语法
指令语法
<!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>模版语法</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Vue模版语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{
{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件...）
举例：v-bind:href='xxx' 或 简写成 :href='xxx', xxx同样要写js表达式
且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是：v-???, 此处只拿v-bind举例
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好,{
{name}}</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url">点我跳转到百度页面1</a>
<a :href="url">点我跳转到百度页面2</a>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'jack',
url:'http://www.baidu.com'
}
})
</script>
</html>
1.4数据绑定
<!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>模版语法</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind): 数据只能从data流向页面。
2.双向绑定(v-model): 数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上（如：input select等）
2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value的值
-->
<!-- 准备好一个容器 -->
<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" v-model="name"><br>
<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
<h2 v-mdoel:x="name">你好啊</h2>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'609'
}
})
</script>
</html>
1.5 el 与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>模版语法</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
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实例了
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好，{
{name}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
//el的两种写法
// const v = new Vue({
// //el:'#root', //第一种写法
// data:{
// name:'609'
// }
// })
// console.log(v)
// v.$mount('#root') //第二种写法
//data的两种写法
new Vue({
el:'#root',
//data的第一种写法：对象式
// data:{
// name:'609'
// }
//data的第二种写法：函数式
data:function(){
console.log('@@@',this) //此处的this是Vue实例对象
return{
name:'609'
}
}
})
</script>
</html>
1.6MVVM模型
- M：模型(Model) ：对应 data 中的数据
- V：视图(View) ：模板
- VM：视图模型(ViewModel) ： 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>模版语法</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
MVVM模型
1. M：模型（Model）：data中的数据
2. V：视图（View）：模版代码
3. VM：视图模型（ViewModel）：Vue实例
观察发现：
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模版中都可以直接使用
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>名称: {
{name}}</h1>
<h1>地址: {
{address}}</h1>
<h1>测试一下1:{
{1+1}}</h1>
<h1>测试一下2:{
{$options}}</h1>
<h1>测试一下3:{
{$emit}}</h1>
<h1>测试一下4:{
{_c}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'第一中学',
address:'北京'
}
})
console.log(vm)
</script>
</html>
1.7数据代理
1.回顾Object.defineProperty方法
<!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>
</head>
<body>
<script>
let number = 18
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, //控制属性是否可以枚举，默认值是false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true, //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
get:function(){
return number
},
//当有人修改person的age属性时，set函数就会被调用，且会收到修改的具体的值
set(value){
console.log('有人修改了age属性,且值是',value)
number = value
}
})
console.log(Object.keys(person))
console.log(person)
</script>
</body>
</html>
2.何为数据代理
<!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>
</head>
<body>
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
<script>
let obj = {
x:100}
let obj2 = {
y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
</body>
</html>
3.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>模版语法</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便地操作data中的数据
3.基本原理：
通过Object.defineProperty()把data上的所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的操作
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>学校名称:{
{name}}</h2>
<h2>学校地址:{
{address}}</h2>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'第一中学',
address:'北京'
}
})
</script>
</html>
可能用到的网站：
- webpack（https://www.webpackjs.com）
- parcel（https://zh.parceljs.org）
- Vue官网（https://cn.vuejs.org/guide/introduction.html）