vue part1 基础
0.准备
pycharm vue与EC6支持设定
https://www.cnblogs.com/infaaf/articles/9593237.html
chrome浏览器插件安装
完成后出现标记
vue页面标记
需要使用vue.js非vue.min.js
调试页面
结构模型MVVM = m:model + v:view + vm
view(dom) ------dom listeners-----》 Model（data）
《------data bindings----
1. 调试运行Helloword
vue与jquery比较
vue
View Code
jquery
View Code
双向绑定例子
{{username}} 和input有默认值（绑定到username），{{username}} 随input输入框输入而变化。
View Code
2. 模版
模版示例
{{变量或者执行函数}} ：属性中绑定 @监听
View Code
显示效果
View Code
3. 计算属性和监视
case
计算computed 执行： 【1】初始化 【2】相关data发生改变 。 注意get 和set方法。set有缓存。
监视watch方法参考即可。
View Code
methods computed watch区别
methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用
区别2
watch对象是变化的值，受影响对象作相关赋值操作
compute对象是受影响对象，直接return 相关结果
4. class与style绑定
主要利用v-bind ，
class 字符串形式：不同于默认html只读取第一个class，可以整合两个class（1个默认，1个变量）
：class对象形式：｛｝，其中key常量，value变量从vue的data中获取。一般常用布尔形式 :class="{aclass:trueorfalse1,bclass:trueorfalse2}"注意引号value上没有
：style对象形式：参考上。注意 key与html style的key有不同。value为普通值string等，注意value无引号
case
View Code
5. 条件渲染
v-if v-else v-show
case1
支持@click="state=!state"表达式
View Code
v-if 与v-show 在浏览器端差别
直接true false形式
View Code
6. 列表
6.1 列表渲染
数组（列表）遍历
case 1
：key=”index“ 用途 https://www.cnblogs.com/tim100/p/7262963.html 影响渲染
View Code
注意数组方法
View Code
数组变化---视图是否变化---数组是否变化规则
vue监视对象是否发生变化，不监视对象内部。 数组方法已被重写为vue变异方法
View Code
case2
添加删除与更新方法，注意vue变异方法
View Code
v-for遍历对象（比较少用）
case3
View Code
6.2 列表搜索排序
补充，filter方法
View Code
case
View Code
7. 事件处理
绑定监听
多种绑定方式
View Code
$event
常用event
event.target.nodeName //获取事件触发元素标签name
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML
event.target.value // input值
View Code
事件修饰符（如@click）
@click.stop='xxx' 停止冒泡。否则显示inner后再显示out
@click.prevent='xx' 默认行为阻止
View Code
按键修饰符
需求：按键enter时触发
@keyup.enter="test" 键盘按键的修饰符，监听enter。不加.enter会监听所有按键。
View Code
8.表单数据的自动收集
html 表单中的name改为v-model 。
form头的 onSubmit改为@submit.prevent
View Code
9. vue 生命周期
略
10. 过渡&动画
实际操作css的transition和animation
效果及状态详细https://cn.vuejs.org/v2/guide/transitions.html
View Code
11.过滤器（格式化）
时间格式化
1. moment插件http://momentjs.cn/
2. Vue.filter功能
View Code
12. 指令补遗
列表
v-text 更新textConten
v-html 更新元素InnerHTML
v-if ,v-show，v-else，v-for，
v-on，简写为 @
v-bind 简写为 ：
v-model双向绑定
ref 唯一标识
v-cloak 防止闪现表达式
内容显示标签
v-model
一般位于input等form标签中，放在span中不能令span产生内容 。v-text v-html改变span标签内内容
双向绑定
v-text v-html比较
v-text 原样显示
v-html 会解析标签，无含义的标签同html无效果。但v-html容易受XSS攻击。
View Code
{{}}与 v-text比较
都是单向绑定， 数据对象改变影响页面值改变，反之不行。基本相同。
{{}}视作v-text简写形式。
当网速过慢时页面显示暴露{{}}
v-text与 v-once单次绑定
View Code
ref
标识符，可以方便定位， 通过textContent 或者innerHTML获取标签内容
View Code
v-cloak
利用解析完成后不再存在特性，设置style display none 等
自定义指令
局部与全局指令定义位置与生效区间不同。
案例略
13 插件
自定义插件 vue-mypluginnamexxx.js。 注意需要向外暴露 window.xxx
引用时放在vue.js的引用之后。
script实际使用时，Vue.use(xxx)
14. 组件components
View Code
说明：
使用到组件（html标签）时，需要定义components
子组件中，使用到动态值需要从父组件中传递时，使用props 。 在父组件中绑定，并使用data回归。
步骤： 1 import引入 2 components ｛｝注册为标签 3 使用
引用父组件变量props申明。
0.准备
pycharm vue与EC6支持设定
https://www.cnblogs.com/infaaf/articles/9593237.html
chrome浏览器插件安装
完成后出现标记
vue页面标记需要使用vue.js非vue.min.js
调试页面
结构模型MVVM = m:model + v:view + vm
view(dom) ------dom listeners-----》 Model（data）
《------data bindings----
1. 调试运行Helloword
vue与jquery比较
vue
View Code
jquery
View Code
双向绑定例子
{{username}} 和input有默认值（绑定到username），{{username}} 随input输入框输入而变化。
View Code
2. 模版
模版示例
{{变量或者执行函数}} ：属性中绑定 @监听
View Code
显示效果
View Code
3. 计算属性和监视
case
计算computed 执行： 【1】初始化 【2】相关data发生改变 。 注意get 和set方法。set有缓存。
监视watch方法参考即可。
View Code
methods computed watch区别
methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用
区别2
watch对象是变化的值，受影响对象作相关赋值操作
compute对象是受影响对象，直接return 相关结果
4. class与style绑定
主要利用v-bind ，
class 字符串形式：不同于默认html只读取第一个class，可以整合两个class（1个默认，1个变量）
：class对象形式：｛｝，其中key常量，value变量从vue的data中获取。一般常用布尔形式 :class="{aclass:trueorfalse1,bclass:trueorfalse2}"注意引号value上没有
：style对象形式：参考上。注意 key与html style的key有不同。value为普通值string等，注意value无引号
case
View Code
5. 条件渲染
v-if v-else v-show
case1
支持@click="state=!state"表达式
View Code
v-if 与v-show 在浏览器端差别
直接true false形式
View Code
6. 列表
6.1 列表渲染
数组（列表）遍历
case 1
：key=”index“ 用途 https://www.cnblogs.com/tim100/p/7262963.html 影响渲染
View Code
注意数组方法
View Code
数组变化---视图是否变化---数组是否变化规则
vue监视对象是否发生变化，不监视对象内部。 数组方法已被重写为vue变异方法
View Code
case2
添加删除与更新方法，注意vue变异方法
View Code
v-for遍历对象（比较少用）
case3
View Code
6.2 列表搜索排序
补充，filter方法
View Code
case
View Code
7. 事件处理
绑定监听
多种绑定方式
View Code
$event
常用event
event.target.nodeName //获取事件触发元素标签name
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML
event.target.value // input值
View Code
事件修饰符（如@click）
@click.stop='xxx' 停止冒泡。否则显示inner后再显示out
@click.prevent='xx' 默认行为阻止
View Code
按键修饰符
需求：按键enter时触发
@keyup.enter="test" 键盘按键的修饰符，监听enter。不加.enter会监听所有按键。
View Code
8.表单数据的自动收集
html 表单中的name改为v-model 。
form头的 onSubmit改为@submit.prevent
View Code
9. vue 生命周期
略
10. 过渡&动画
实际操作css的transition和animation
效果及状态详细https://cn.vuejs.org/v2/guide/transitions.html
View Code
11.过滤器（格式化）
时间格式化
1. moment插件http://momentjs.cn/
2. Vue.filter功能
View Code
12. 指令补遗
列表
v-text 更新textConten
v-html 更新元素InnerHTML
v-if ,v-show，v-else，v-for，
v-on，简写为 @
v-bind 简写为 ：
v-model双向绑定
ref 唯一标识
v-cloak 防止闪现表达式
内容显示标签
v-model
一般位于input等form标签中，放在span中不能令span产生内容 。v-text v-html改变span标签内内容
双向绑定
v-text v-html比较
v-text 原样显示
v-html 会解析标签，无含义的标签同html无效果。但v-html容易受XSS攻击。
View Code
{{}}与 v-text比较
都是单向绑定， 数据对象改变影响页面值改变，反之不行。基本相同。
{{}}视作v-text简写形式。
当网速过慢时页面显示暴露{{}}
v-text与 v-once单次绑定
View Code
ref
标识符，可以方便定位， 通过textContent 或者innerHTML获取标签内容
View Code
v-cloak
利用解析完成后不再存在特性，设置style display none 等
自定义指令
局部与全局指令定义位置与生效区间不同。
案例略
13 插件
自定义插件 vue-mypluginnamexxx.js。 注意需要向外暴露 window.xxx
引用时放在vue.js的引用之后。
script实际使用时，Vue.use(xxx)
14. 组件components
View Code
说明：
使用到组件（html标签）时，需要定义components
子组件中，使用到动态值需要从父组件中传递时，使用props 。 在父组件中绑定，并使用data回归。
步骤： 1 import引入 2 components ｛｝注册为标签 3 使用
引用父组件变量props申明。