vue新手入门详细教程
vue.js
vue.js是一套用于构建用户界面的渐进式框架。
Vue的核心：声明式渲染，组件
Vue功能：模板引擎，组件，路由，状态管理器（管理数据–可伸缩性的），自动化构建。
核心基本语法：
第一步：vue.js引入：
// https://cdn.jsdelivr.net/npm/vue/dist/vue.js vuejs下载网址
<script src="js/vue.js"></script>
第二步：模板引擎代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- vue是一个前端框架
核心：模板引擎 声明式渲染
组件：增加页面复用性
路由：前端路由
状态管理器：管理数据，可伸缩性的
自动化构建：需求
-->
<div id="app"></div>
</body>
</html>
<script>
// 引入
// 模板引擎
/*
模板引擎：
1.得到一批数据（用户产生，后端提供
2.将数据动态的组装
3.将组装好的内容添加到页面指定元素位置
元素也就是 el：挂载点
template:模板（最终形成ui的原始结构）
data：数据
vue帮助我们做的事情：将data和template相结合，最后添加到挂载点上
*/
new Vue({
// 属性 3个核心点
el:'#app',
template:`
<h1>{{title}}</h1>
`,
data:{
title:"尴尬"
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script>
/*
1.模板生成后，会替换掉 挂截点指定的元素
2.每一个独一的模版 有企鹅只能有一个顶级的根节点
3.如果指定了el，且没有模板（ template），那么el中outerHTML（innerHTML相似）将作为template里面的内容，如果有的话，会优先选择它
*/
new Vue({
el:"#app",
template:`
<div>
<span>傻子</span>
</div>
`,
data:{
}
});
</script>
页面展示效果：
vue-rende函数：
随后详细更近
<body>
<div id="app"></div>
</body>
</html>
<script>
/*
参数：虚拟DOM；
*/
new Vue({
el:"app",
render(createElement){
return createElement("h1",{attrs:{h1:'haha'}},"1906");
}
});
</script>
挂载
延迟挂载 实例化对象 谁调用就指定谁
指定挂载点
1. el 挂载点 不能是body 和html
2.对象配置信息
2.当实例被挂载以后 vue实力上的内置属性都是以$或者——kaitoude
eg： app.$mount("#app");
data：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="aa">
</div>
</body>
</html>
<script>
/*
data
在当前模板中可以直接使用（不需要去使用this一类的东西）；
2.data中的数据命名 不要使用$或——开头，因为vue解析data后他会把当前的数据加载到实例对象中；
*/
// 延迟挂载
new Vue({
el:"#aa",
template:`
<div id="aa">
<span>{{name}}</span>
</div>
`,
data:{
name:"上课了"
}
});
console.log(app);
</script>
视图更新 代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="aa">
<span>{{name}}</span>
</div>
//eg2:
<div id="app">
<h1>x:{{obj.x}}</h1>
<h1>y:{{obj.y}}</h1>
<p>{{arr}}</p>
</div>
</body>
</html>
<script>
// 响应数据的变化（数据驱动视图）数据的变化会自动跟新视图（自动重新渲染模板）
// 在console中其他写法：aa.$data.name ="你好"
let aa = new Vue({
el:"#aa",
data:{
name:"你过来"
}
});
console.log(aa);
//eg2:
// 只有监听了x才会顺便监听一下y；
let app = new Vue({
el:"#app",
data:{
obj:{
x:1
},
arr:[1,2,3]
// 添加数组 app.arr.push（）；
// app.arr[2] = 666;
}
});
app.$set(app.obj,'y',200);
</script>
数组中如何添加内容：
数据劫持（代码演示）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="aa">
<h1>{{name}}</h1>
</div>
</body>
</html>
<script>
let app = document.querySelector("#aa");
function render(){
console.log("渲染开始~");
// x跟name的拼接
app.innerHTML = obj.x+"/"+obj.age;
}
// 自动渲染视图
let obj ={
x:1
}
render();
// 手动重新渲染 render渲染开始
// obj.x = 100;
// render();
// 数据劫持 变相的数据监听 有两个方法 一个设置 一个获取
let $data = {x:1};
Object.defineProperty(obj,"x",{
set(newVale){
// 每次x改变会变新的值然后用set调用形成死循环
$data.x = newVale;
render();
},
get(){
return $data.x;
}
});
// 第二个值
Object.defineProperty(obj,"age",{
set(newVale){
$data.age = newVale;
render();
},
get(){
return $data.age;
}
})
// 这里面的问题：
// 无法对新增的属性进行监听（只能监听一个） 解决问题就是在写一遍
// 如下：
// Object.defineProperty(obj,"age",{
// set(newVale){
// $data.age = newVale;
// render();
// },
// get(){
// return $data.age;
// }
// });
</script>