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
jquery
双向绑定例子
{{username}} 和input有默认值(绑定到username),{{username}} 随input输入框输入而变化。
2. 模版
模版示例
{{变量或者执行函数}} :属性中绑定 @监听
显示效果
3. 计算属性和监视
case
计算computed 执行: 【1】初始化 【2】相关data发生改变 。 注意get 和set方法。set有缓存。
监视watch方法参考即可。
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
5. 条件渲染
v-if v-else v-show
case1
支持@click="state=!state"表达式
v-if 与v-show 在浏览器端差别
直接true false形式
6. 列表
6.1 列表渲染
数组(列表)遍历
case 1
:key=”index“ 用途 https://www.cnblogs.com/tim100/p/7262963.html 影响渲染
注意数组方法
数组变化---视图是否变化---数组是否变化规则
vue监视对象是否发生变化,不监视对象内部。 数组方法已被重写为vue变异方法
case2
添加删除与更新方法,注意vue变异方法
v-for遍历对象(比较少用)
case3
6.2 列表搜索排序
补充,filter方法
case
7. 事件处理
绑定监听
多种绑定方式
$event
常用event
event.target.nodeName //获取事件触发元素标签name
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML
event.target.value // input值
事件修饰符(如@click)
@click.stop='xxx' 停止冒泡。否则显示inner后再显示out
@click.prevent='xx' 默认行为阻止
按键修饰符
需求:按键enter时触发
@keyup.enter="test" 键盘按键的修饰符,监听enter。不加.enter会监听所有按键。
8.表单数据的自动收集
html 表单中的name改为v-model 。
form头的 onSubmit改为@submit.prevent
9. vue 生命周期
略
10. 过渡&动画
实际操作css的transition和animation
效果及状态详细https://cn.vuejs.org/v2/guide/transitions.html
11.过滤器(格式化)
时间格式化
1. moment插件http://momentjs.cn/
2. Vue.filter功能
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攻击。
{{}}与 v-text比较
都是单向绑定, 数据对象改变影响页面值改变,反之不行。基本相同。
{{}}视作v-text简写形式。
当网速过慢时页面显示暴露{{}}
v-text与 v-once单次绑定
ref
标识符,可以方便定位, 通过textContent 或者innerHTML获取标签内容
v-cloak
利用解析完成后不再存在特性,设置style display none 等
自定义指令
局部与全局指令定义位置与生效区间不同。
案例略
13 插件
自定义插件 vue-mypluginnamexxx.js。 注意需要向外暴露 window.xxx
引用时放在vue.js的引用之后。
script实际使用时,Vue.use(xxx)
14. 组件components
说明:
使用到组件(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
jquery
双向绑定例子
{{username}} 和input有默认值(绑定到username),{{username}} 随input输入框输入而变化。
2. 模版
模版示例
{{变量或者执行函数}} :属性中绑定 @监听
显示效果
3. 计算属性和监视
case
计算computed 执行: 【1】初始化 【2】相关data发生改变 。 注意get 和set方法。set有缓存。
监视watch方法参考即可。
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
5. 条件渲染
v-if v-else v-show
case1
支持@click="state=!state"表达式
v-if 与v-show 在浏览器端差别
直接true false形式
6. 列表
6.1 列表渲染
数组(列表)遍历
case 1
:key=”index“ 用途 https://www.cnblogs.com/tim100/p/7262963.html 影响渲染
注意数组方法
数组变化---视图是否变化---数组是否变化规则
vue监视对象是否发生变化,不监视对象内部。 数组方法已被重写为vue变异方法
case2
添加删除与更新方法,注意vue变异方法
v-for遍历对象(比较少用)
case3
6.2 列表搜索排序
补充,filter方法
case
7. 事件处理
绑定监听
多种绑定方式
$event
常用event
event.target.nodeName //获取事件触发元素标签name
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML
event.target.value // input值
事件修饰符(如@click)
@click.stop='xxx' 停止冒泡。否则显示inner后再显示out
@click.prevent='xx' 默认行为阻止
按键修饰符
需求:按键enter时触发
@keyup.enter="test" 键盘按键的修饰符,监听enter。不加.enter会监听所有按键。
8.表单数据的自动收集
html 表单中的name改为v-model 。
form头的 onSubmit改为@submit.prevent
9. vue 生命周期
略
10. 过渡&动画
实际操作css的transition和animation
效果及状态详细https://cn.vuejs.org/v2/guide/transitions.html
11.过滤器(格式化)
时间格式化
1. moment插件http://momentjs.cn/
2. Vue.filter功能
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攻击。
{{}}与 v-text比较
都是单向绑定, 数据对象改变影响页面值改变,反之不行。基本相同。
{{}}视作v-text简写形式。
当网速过慢时页面显示暴露{{}}
v-text与 v-once单次绑定
ref
标识符,可以方便定位, 通过textContent 或者innerHTML获取标签内容
v-cloak
利用解析完成后不再存在特性,设置style display none 等
自定义指令
局部与全局指令定义位置与生效区间不同。
案例略
13 插件
自定义插件 vue-mypluginnamexxx.js。 注意需要向外暴露 window.xxx
引用时放在vue.js的引用之后。
script实际使用时,Vue.use(xxx)
14. 组件components
说明:
使用到组件(html标签)时,需要定义components
子组件中,使用到动态值需要从父组件中传递时,使用props 。 在父组件中绑定,并使用data回归。
步骤: 1 import引入 2 components {}注册为标签 3 使用
引用父组件变量props申明。