笔记1~5
一、vue特点：易用，灵活，高效
二、渐进式：根据不同的需求加载不同的模块
库和框架的区别：
库：jq...js 功能单一
框架：vue react angular
三、vue核心：数据驱动，组件化
四、vue的安装方式
1.cdn方式需要引入开发版本
2.npm install vue
3.直接下载
五、vue指令
1.text/html
都是写入内容，html识别标签，text不识别标签
2.v-if/v-show
v-show通过样式display:none来隐藏内容 用于频繁切换内容
v-if直接移除元素
v-if与v-else if/v-else之间不得有内容
3.v-bind 绑定属性 简写为 :
4.v-on 绑定方法 简写为 @
5.v-for 循环 与:key固定搭配 :key：绑定一个唯一值 避免勾选不正确
6.v-model 数据双向绑定 只能应用于表单元素
六、绑定样式
1.class 样式绑定
:class="[1==2?box1:box2]"
:class = "box+' box2 ' "
2.style样式绑定
:style="obj"
:style="[box1,box2]"
day2
一、表单
1、单选框
绑定的属性一定要于value的值保持一致，提交的是value值
性别: <input type="radio" name="sex" value="0" v-model='sex'>男 <input type="radio" name="sex" value="1" v-model='sex'>女
2、多选框
a、初始值为数组：会把value值赋给数组
<input type="checkbox" checked value="sing" v-model='hobby'>唱歌 <input type="checkbox" value="dance" v-model='hobby'>跳舞 <input type="checkbox" value="coding" v-model='hobby'>敲代码
b、初始值为对象：则会把数据类型转换为布尔值，结果以true/false显示
<input type="checkbox" checked value="sing" v-model='hobby2'>唱歌2 <input type="checkbox" value="dance" v-model='hobby2'>跳舞2 <input type="checkbox" value="coding" v-model='hobby2'>敲代码2
3、下拉框
把初始值绑定到select上，根据option的value值对select赋值
<select v-model='edu'> <option value="小学">小学</option> <option value="中学">中学</option> <option value="大学">大学</option> </select>
4、文本框
写啥就是啥
PS:VUE单页应用
SPA：signal page application（单页应用）
多页面：1个url->1个html文件 多个url->多个url
单页面:1个url->多个组件 他们之间的切换是通过路由
二、修饰符
1.事件修饰符
stop :阻止事件冒泡
prevent:阻止默认行为
capture:事件捕获 给谁添加谁先出来
once:只执行一次
self:只有自己才可以触发自己
2.鼠标修饰符
left:左键触发
right:右键触发
middle:中间滚轮
注意：对于修饰符自多只能写两个
3.键盘修饰符
up,down,left,right,enter
4.表单修饰符
lazy:失去焦点后获取最新数据
number:只判断第一个值是否是number类型 是number返回number 不是返回string
trim:去除用户输入内容的首位空格
三、生命周期
钩子函数：8个
1.创建之前： beforeCreate : el data name 都是undefined
2.创建完成： created：el ：undefined data：可以拿到数据
3.挂载之前： beforeMount：el：有节点了，data：有数据 此时el中的数据没有渲染
4.挂载完成： mounted:页面渲染完成
5.更新之前 beforeUpdate:更新数据
6.更新完成 updated：更新完成 注意：更新前后数据是一致的
7.销毁之前 beforeDestory：销毁之前
8.销毁完成 destory:销毁完成
四.动画
1、基础使用
第一步：给需要添加动画的元素用<transition>包裹起来
第二步：设置6个样式
1.v-enter{}
2.v-enter-to{}
3.v-enter-active{}
4.v-leave-to{}
5.v-leave-to{}
6.v-leave-active{}
注意:如果需要添加多个动画，只能修改样式中的v 把v换成自己定义的类名即可
2、动画库的使用
引入animate.css这个库
day3
一.watch
案例：百度搜索框
接口：百度：http://suggestion.baidu.com/su?cb=callback&wd=123
深浅监听
watch:{ //浅监听 msg(newVal,oldVal){ console.log(newVal,oldVal) }, //深监听 json:{ //这个名字不能更改 handler(a){ console.log(a) }, //主要通过deep属性 deep:true }, 注意：不建议使用深监听，通常转换为浅监听方式 }
a.跨域的解决 jsonp
b.通过监听用户输入，发送请求，渲染页面
二、过滤器 fliter
全局： Vue.fliter('过滤器名字',回调函数) 回调函数中做的是业务逻辑
局部：在vue实例中通过filters配置项来配置 filters:{ 过滤器名称(){ 业务逻辑} }
三、计算属性 computed
通过计算的出来的，没有初始值
day4
一、组件
特点：一组可复用的vue实例
组件化和模块化的区别？
组件化：组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性
特点：一个具有html+css+js的页面
模块化：侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。
二、命名规则
1.不能以标签起名，包含大写 2.建议用驼峰起名 3.首字母大写，后面直接写名字。如果后面有大写需要转换为驼峰
三、template模板
组件：一组可服用的vue实例
用法：全局定义，局部定义
Vue.component('组件名',模板对象) 全局
components{ 局部
组件名：{模板对象}
}
四、data使用
重点：组件中定义data为函数，原因是：为了共享数据但是又互相不干扰.
data(){
return{
}
}
总结:data定义为函数的原因:由于需要共享数据，但是又要互不干扰,所以定义为函数
五、组件嵌套
注意：子组件只能在父组件中使用 子组件中的数据目前仅能供自己使用
components:{ vOne:{ 一层组件 template:'#temp1', components:{ vInner:{ 二层组件 template:'<div>我是里层嵌套的模板<v-three></v-three></div>', components:{ vThree:{ 三层组件 template:'#temp2' } } }, vOuter:{ 二层组件
} }, data(){ return { name:'张三' } } }
// 总结：组件中关系：只有父子和非父子关系 // 嵌套:子组件只能在父组件中使用 // 组件中的data ：定义为方法，必须有返回值，同时返回值的类型为对象 // data 中的数据只能供自己使用 如果其他组件需要使用需要传值 比如：data,methods,filter,cmpputed,watch...
六、后台管理页面实现
注意：1.外层嵌套大盒子（container） 2.划分布局 3.书写组件 4.组件嵌套 5.添加样式
七、生命周期 --8个钩子函数 mounted 是最常用的
v-if 会引起生命周期的改变
v-show 不会引起
第一次生命周期会触发的为:beforeCreate，created，beforeMount，mounted
八、脚手架
方法：
1全局安装webpack
npm i webpack -g
查看版本 webpack -v
2全局安装vue脚手架 2.x
npm i vue-cli -g
//查看版本 vue -V
以上操作只需要操作一次
1.创建项目
vue init webpack demo
2.进入项目
cd demo
3.启动
npm run dev //localhost:8080
注意： 安装cnpm方法 淘宝镜像 npm i -g cnpm --registry=https://registry.npm.taobao.org
day5
一、组件通信
a.父传子：
例：
父 ：方法名=”要发的东西“ 发
子 props：【”方法名“】 收
总结：
1.父传子：传递的是基础数据类型 给父组件中的子组件绑定属性，此时属性的值在父组件中已经定义，子组件需要通过porps接收,要用数组接收 在子组件中直接渲染接收到的值即可
2.父传子:子修改父组件传递的值报错,如果解决，把父组件传递过来的值变为自己的属性，直接修改自己属性即可。后果：父组件修改不会影响自己的数据
3.父传子:父变，子变，子变，父变，需要在父组件中定义对象，传递给子组件的就是对象的方式，子组件正常接收即可
b.子传父：
例：
this.$emit("方法名"，要发的东西)
c.非父子:
例：
发数据 this.Event.$emit
收数据 this.Event.$on
二、is
1.解决标签的固定搭配问题
例：
<ul> <li is='vOne'>我是li的内容</li>
</ul>
2.动态组件
例：点击改变显示页面
<button @click="name='vOne'">one</button> <button @click="name='vTwo'">two</button> <div :is='name'></div>
三、slot
1.无名插槽
子组件：
<slot></slot>
123
<slot></slot>
父组件：
<v-one> <div>我就是插入到one组件中的内容1111</div> <div>我就是插入到one组件中的内容22222</div> </v-one>
2.具名插槽
父组件：
<v-two> <div slot="aa">白日依山尽</div> <div slot="bb">黄河入海流</div> <div slot="cc">欲穷千里目</div> <div slot="dd">更上一层楼</div> </v-two>
子组件：
<slot name='aa'></slot> <slot name='bb'></slot> two <slot name='cc'></slot> <slot name='dd'></slot>
四、ref
1.ref 操作普通元素 就是获取到的dom元素 2.ref 操作的组件 获取的就是组件的数据和方法 3.使用ref 需要通过this.$refs来获取
this.$refs.子组件.子组件属性=xxxxxxxxxxx 改变子组件
五、jquery
下载
npm install jquery --save
局部 import $ from 'jquery'
全局 在main.js import $ from 'jquery' Vue.prototype.$ = $; //此时这个$是vue实例中的一个属性，所以需要通过this.$调用
浙公网安备 33010602011771号