01-(了解)Vuejs课程介绍P2 - 01:26
Xmind思维导图制作工具。
一、vue-mvvm架构。
二、基本语法
三、组件化开发
四、vue-cli脚手工具：基于webpack，cli2、cli3
五、vue-router前端路由
六、vuex-状态管理
七、网络封装AXIOS(其中一个封装框架）
八、项目实战。
九、项目部署。
十、远离相关（响应式远-双向绑定）
02-(理解)Vuejs的认识和特点介绍P3 - 00:29
1、渐进式：将vue 作为一部分嵌套进去,一部分是由vue,一部分是其他的。
2、可复用组件，前端路由技术，状态管理，虚拟dom底层属性。
3、es6语法，用工具解析成es5，所以浏览器识别的还是es5语法。
03-(掌握)vuejs安装方式P4 - 00:06
1、方式一：直接CDN引入（选择开发环境版本或者生产环境版本引入
2、方式二：直接下载和引入
3、方式三：npm安装-后期学到
vscode编辑器 后期推荐使用 插件比较多，微软的产品。
webstorm
04-(掌握)HelloVuejs的初体验P5 - 00:11
<body>
<!--//div交给了vue实例管理-->
<div id="app">
<h2>{{message}}</h2>
<h2>{{name}}</h2>
</div>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
//let (定义变量)const(定义常量)
// let name ="cyy";
// name="chang"可以重新赋值
// const不能重新赋值，一旦重新赋值就会报错
//创建vue实例 ,传入一个对象 有个参数 用于挂载我们的元素ID=APP,让我们的vue管理这个div
//vue编程：声明式编程（当我的实例去管理这个div的时候，你只需要告诉这个div显示什么东西就是了）
const app= new Vue({//APP不需要改她了
el:"#app",//这个属性的作用：用于挂载要管理的元素。
data:{//定义一些数据
message:"壮壮你好呀~~~~",
name:"hello world"
}
})
//js做法：编程范式：命令式编程
05-(掌握)Vue列表的展示P6 - 00:53
<ul>
<!--foods依次取出来放到变量item，每次item值是不一样的-->
<li v-for="item in foods">{{item}}</li>
</ul>
const app =new Vue({
el:"#app",
data:{
message:"你好啊，",
foods:['麻婆豆腐','宫保鸡丁','炒土豆丝','酸菜面','饺子','麻辣米线'],//数组
}
})
06-(掌握)小案例-计数器P7 - 00:01
methods 定义方法， v-on监听某个事件简写
点击事件 v-on:click ===@click
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!--监听v-on 监听了点击事件-->
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
const app =new Vue({
el:"#app",//挂载
data:{//定义数据
counter:0,
},
methods:{//定义方法
add:function () {//add是个函数
console.log("add被执行");
this.counter++ //当前对象拿变量 this
},
sub:function () {
console.log("sub被执行");
this.counter--
}
}
})
07-(理解)Vue的mvvmP8 - 00:18
model view 上的事件需要改变需要view model 通信桥梁，
view就是dom,
model相当于是数据，js，定义的数据或者网络请求的数据，
view Model---就是vue实例，帮助我们将data里的数据绑定到view里，也就是将model里面以及js里面定义数据 绑定到真实的dom上面，view永远展示的是model里面最新的数据，
第二个事情就是当我们view上面有一些事件，或者用户操作的时候，通过vue实例定义的一些指令，把我们事件响应相关的东西 绑定到model上面，就是因为view model的监听，来回调我们定义的js对象。
const obj={
counter:0,
message:"你好啊 hello"
}//也可以这么写 proxy代理
const app =new Vue({
el:"#app",//挂载
// data:{//定义数据////-----model
// counter:0,
// },
data:obj,
methods:{//定义方法
add:function () {//add是个函数
console.log("add被执行");
this.counter++ //当前对象拿变量 this
},
sub:function () {
console.log("sub被执行");
this.counter--
}
}
})
08-(理解)Vue的options选项P9 - 00:09
创建vue 实例的时候 传入了一个对象option。对象里面有很多属性
目前可掌握少部分：
1、el:类型 字符串string或者htm(document.querySelector(),)
作用：决定之后vue实例会管理哪一个DOM
2、data:类型 对象objec或者函数function(组件中的data必须是一个函数）
作用：vue实例对应的数据对象 一般放在这里
3、methods:类型{[key:string]:function} 定义的一般都是一大堆的函数，逗号分隔
作用：定义属于vue的一些方法，可以再其他地方调用，也可以在指令中使用。
开发中什么时候称之为方法，什么时候称之为函数？？？
答：方法叫method,实例中定义的一般是方法
函数function，直接在script中写的一般
09-(理解)什么是Vue的生命周期P10 - 00:31
什么叫生命周期：一个事物从诞生到消亡的整个过程，
vue的生命周期：只要new vue创建了，就会做一系列的事情都在源码中做的事情，做这些事情的时候 告诉你 做到哪一步了，就会 执行哪个内部函数
10-(理解)Vue的生命周期函数有哪些P11 - 00:07
生命周期也叫钩子函数hook。传过来函数通过钩子来回调它
let app = new Vue({
el:'#app',
data:{
msg:"IT程序员的日常"
},
methods:{
say:function () {
console.log("IT程序员的日常");
}
},
beforeCreate:function () {
/*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
//console.log(this.msg);
//this.say();
//console.log(this.say);
},
created:function () {
/*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
* 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问,
* 当我们把某一个组件 或者实例创建之后 就会在这里面做一些网络请求，
将请求到的数据放到data里面，之后将data数据展示到dom中
*/
//console.log(this.msg);
//this.say();
// console.log(this.say);
},
beforeMount:function () {
/*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
// console.log(document.querySelector("p").innerText);
// console.log(document.querySelector("p").innerHTML);
},
mounted:function () {
/*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
beforeUpdate:function(){
/*主要data中的数据发生了变化就会执行
* 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
*
* */
// console.log(this.msg);
// console.log(document.querySelector("p").innerText);
// console.log(document.querySelector("p").innerHTML);
},
updated:function () {
/*主要data中的数据发生了变化就会执行
* 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
*
* */
console.log(this.msg);
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
beforeDestroy:function(){
/*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
* 最后能使用Vue实例的地址
* */
},
destroyed:function () {
/*
* 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
* */
}
})
