Vue学习笔记——指令和部分组件
2018-01-07 20:56
886 查看
Vue实例 2
v-model 2
v-if v-else v-show 2
v-for 3
Computed运算数据 3
Computed运算数据之排序数组 4
V-text和v-html 4
Methods 4
V-model和form表单的绑定 5
三个修饰符 5
复选框中加v-modle 6
将数据和表单标签进行绑定 7
V-bind 7
动态标签绑定 7
绑定样式 8
Style 样式绑定在data数据中 9
Style 绑定json语句 9
其他的指令 10
V-Pre指令 10
V-cloak外套, 10
V-once只显示一次 11
全局API 11
自定义指令 11
指令生命周期 11
Vue.extend挂载 13
V-set 14
构造器生命周期 15
Teamplate模板 16
组件-1Component 16
组件-2 props 17
组件-2 props 18
组件-2 component标签 19
选项 21
propsData 开发环境数据测试而已 21
Methods 22
Watch 24
Mixin混入 25
Extend 26
选项 26
Render 26
实例$ 26
实例事件 26
在外部创建方法 26
在外部调用构造器的方法 27
Slot 27
Vue的Ajax 28
Translation
标签 29
Css动画库 30
过滤器 31
V-for和过滤器 32
笔记:本版本是vue2.0
在使用Vue.js的过程中,先引入脚本
在js中 new Vue({ key:value,key:value})一个实例化。
其中 el:''代表作用域,''中填作用域的‘#+ID’
data键中可以继续定义键值对
{
key:value,
key:value,
}
在body 中使用 {{key}}
来显示Vue中data的键所代表的值。
= new
Vue({
el:
'#app-6',
data: {
message:
'Hello Vue!'
//可以自定义键值对
}
})
该属性是使用绑定标签,在某一个标签改变的时候,对应的data里面的key对应的值也会改变,使得引用这个键的地方的值也随着改变。
使用方式:<input
v-model="message">
比如
<p
v-if="seen">表示data中有个key
来判断显示</p>
<p
v-else>显示反方向的</p>
<p
v-show>简简单单的显示</p> //代表css中的display要显示的主键
注意:以上标签必须在 el书写的作用域中
todo:[
{text:"1"},
{text:"1"},
{text:"1"}
],
student:[11,22,33,44,45]
一个对象数组
一个数值数组
使用的方式,跟json差不多 直接用in在标签上遍历
<p
v-for="q in todo">
{{q.text}}
</p>
<p
v-for="stu in student">
{{stu}}
</p>
方法运行数据 赋值的空的数据中
比如
studentsort:'',
computed:{
studentsort:function
() {
return this.student.sort()
}
那么studentsort这个的值会变成 student 运算后的值
也就是说源数据是不能污染的,只能重新定义一个接收,下次才能再使用源数据处理成不同的数据
如果是值的对象,可以通过
自定义的function在外部书写好后 在commputed里面进行 调用排序,
在对象数值中,写入按照谁进行数据的排序
后者会编译文本中的标签进行显示
使得源数据的响应发生对应的改变
可以绑定文本字进行使用
键值表的使用
可以使用按键来触发事件
.number 自动格式 数据可以直接运算,只能针对数值
.trim 前后删除空格。
注意 插值 {{}}
是无法绑定标签的 只能加载一次 要绑定的话 必须加 v-model=”message”
:绑定属性
@绑定事件
样式名的绑定 :class=’[样式名称’,样式名称’]
样式名的绑定:class=’{样式名字,data中key}’ 是否显示 key:’true’
三元表达式的使用
[key?data中的key样式1:data中的key样式名字2]
判断组合
’[{样式名字,data中key},data中的key样式名字2]’ 是否显示
key:’true’
Style
:style=’{ color:data的key }’ key必须在
data中的数据有对应的值
Style
:style=”fontStyle”.
在data写个数组 键值对的形式 变成样式
[V-cloak]{
Display:none
}
样式要放在script之前
以上都是vue指令的内容
自定义指令,就是v-自己定义的
@事件
后面jia是methods中的方法
Bind被绑定
Inserted绑定到节点
以上是绑定的时候
Update组件更新
componentUpdated更新完成
绑定好了进行操作更新
Vue.directive(
‘wos’,{
}
如果构造器解绑了就不控制组件了
Vm.$destroy();
操作就没有了
)
一开始绑定的时候样式或者信息
更新的时候 操作时候 样式的修改
一般是在 bind 和update这俩个自定义的指令中设置
Var vm=Vue.extend({
键值对
Template:”模板”,
Data:function(){
Return {
键值对
Message:”标签”
}
}
})
以上就是延伸
然后对延伸进行生效
就是将定义的值
Vm实例化出来,挂载到指定标签中
New vm().$mount(‘#id’)
Var ong={
Key : value,
key:[
{},
{}
]
}
然后在构造器的data中引用当前的数据
Data:ogn,
那么ong里面的数据都会放在data中
不常用
、
数组名.push追加 数据 一般请求了数据就可以得到数组追加到后面响应的更新数据
响应式更新必须把方法写在,data的下方methods中才能对data的数据进行更新、
Methods:{
方法名:function(){
This.data中的数据=null;
}
}
Null代表数据不在内存中了,不在对其操作了
用户部署数据
生命周期是放在data数据的下面
前四个先初始化
脚本的数据写在 mounted、创建的时候,挂载的时候
前三个不允许任何操作
更新的记录
这是在点击销毁的时候”vm.$destroy();”
4,6,9用来更新数据
1.放在构造器的
Template:` <h1>最简单的模板</h1>`
嵌入到外部构造器
2. 标签的模板
<template id=”qq”></template>
引用外部的模板
1的构造器中将id放在` #id`中
3. 放在script中
不同的环境写不同的模板
使用自己的标签
1.直接全局Vue.component(‘标签名字’,{
Template:’源码’
})
只能在作用域,就是标签要在构造器中声明
Var component={
“内容”
}
2. 在构造器中声明的局部
Components:{
“world”:组件名称不需要””;
}
Props是一个组件
Var component={
“内容”;
Props:[‘插值内容’]
}
上面是直接写在属性的
我们可以用v-bind绑定data中的数据
验证数据
Props:{
}
数据验证的方式
Var conpnentChid={
Template:`
<div></div>
`
}
Var component={
“内容”;
Components:{
“新标签名”:局部组件名称
}
}
父组件中引用子组件
先挂载组件
如果需要插值的时候
可以在组件中定义方法data:function(){
Return{
A:’1’;
}
}
propsData
Computed:{
Message:funtion(){
Return this.mesage=’计算’;
}
}
名字就是处理后的数据返回放到名字中多个方法,号隔开处理数据。相当于data中的属性
计算后再显示出来。数据计算处理格式化。比如json数据经过处理再显示
Methods:{
}
这是事件的处理
改变原数据时候,其他数据会实时更新
Jia(1,$event)
鼠标事件
组件使用的变迁引用本地的方法
外部引用内部的方法
Vm.jia();
V-on的事件
V-on.click.stop阻止冒泡
V-on:submit.prevent 表单上使用 阻止返回上一个页面
V-on:click.captrue 捕获模式
修饰符可以串联起来
Native的修饰符
Watch:{
n:funtion(a,b){
//n是原来的那个数据data中的
A代表修改后的值
B代表之前的值
//通过判断ab来设置this.n的值
}
}
以上实在构造器的
可以写在构造器以外的
//一种策略模块化加载
Vm.$watch(n,function(a,b){
});
Var aaa={
Created:fnction(){
This.message=”我被混入了”
}
}
先执行混入的再执行原装的
全局混入的
Vue.mixin({
})
日志管理,用户的行为和使用习惯
This.parent.message父辈的message
Delimiters插值写法的改变
引入jq,可以在methods里面,或者生命周期中mounted:function(){}
实例就是vue对外的接口,数据操纵
.$forceUpdate()
.$destroy
Vm.$onece只执行内部一次
Vm.$off(‘内部事件’)关闭内部方法或者事件
Vm.$nextTick(function(){
})
在现实的标签中加 slot属性
在模板中也加属性
一种好标签的内容扩展
内容到模板
放在beforemount:function(){
This.$http.get(‘url’).then(response)=>{
},(response)=>{
}
}
Vue-else-if
Translation
Debounce=1000;防止输入过快攻击
ms 默认是300ms
延迟绑定数据
默认显示
limitBy 第一个是显示的个数
第二个是从哪一个开始显示
从哪里找
使用
0是正序 -1是反序
v-model 2
v-if v-else v-show 2
v-for 3
Computed运算数据 3
Computed运算数据之排序数组 4
V-text和v-html 4
Methods 4
V-model和form表单的绑定 5
三个修饰符 5
复选框中加v-modle 6
将数据和表单标签进行绑定 7
V-bind 7
动态标签绑定 7
绑定样式 8
Style 样式绑定在data数据中 9
Style 绑定json语句 9
其他的指令 10
V-Pre指令 10
V-cloak外套, 10
V-once只显示一次 11
全局API 11
自定义指令 11
指令生命周期 11
Vue.extend挂载 13
V-set 14
构造器生命周期 15
Teamplate模板 16
组件-1Component 16
组件-2 props 17
组件-2 props 18
组件-2 component标签 19
选项 21
propsData 开发环境数据测试而已 21
Methods 22
Watch 24
Mixin混入 25
Extend 26
选项 26
Render 26
实例$ 26
实例事件 26
在外部创建方法 26
在外部调用构造器的方法 27
Slot 27
Vue的Ajax 28
Translation
标签 29
Css动画库 30
过滤器 31
V-for和过滤器 32
笔记:本版本是vue2.0
在使用Vue.js的过程中,先引入脚本
在js中 new Vue({ key:value,key:value})一个实例化。
其中 el:''代表作用域,''中填作用域的‘#+ID’
data键中可以继续定义键值对
{
key:value,
key:value,
}
在body 中使用 {{key}}
来显示Vue中data的键所代表的值。
Vue实例
var app6= new
Vue({
el:
'#app-6',
data: {
message:
'Hello Vue!'
//可以自定义键值对
}
})
v-model
该属性是使用绑定标签,在某一个标签改变的时候,对应的data里面的key对应的值也会改变,使得引用这个键的地方的值也随着改变。
使用方式:<input
v-model="message">
v-if v-else v-show
该属性可以判断Vue实例中的data中key对应的值比如
<p
v-if="seen">表示data中有个key
来判断显示</p>
<p
v-else>显示反方向的</p>
<p
v-show>简简单单的显示</p> //代表css中的display要显示的主键
注意:以上标签必须在 el书写的作用域中
v-for
在Vue实例中的data中存在一个键值对分别是todo:[
{text:"1"},
{text:"1"},
{text:"1"}
],
student:[11,22,33,44,45]
一个对象数组
一个数值数组
使用的方式,跟json差不多 直接用in在标签上遍历
<p
v-for="q in todo">
{{q.text}}
</p>
<p
v-for="stu in student">
{{stu}}
</p>
Computed运算数据
在data中添加一个键值,但是值是空的,通过方法运行数据 赋值的空的数据中
比如
studentsort:'',
computed:{
studentsort:function
() {
return this.student.sort()
}
那么studentsort这个的值会变成 student 运算后的值
也就是说源数据是不能污染的,只能重新定义一个接收,下次才能再使用源数据处理成不同的数据
Computed运算数据之排序数组
如果是值的对象,可以通过
自定义的function在外部书写好后 在commputed里面进行 调用排序,
在对象数值中,写入按照谁进行数据的排序
V-text和v-html
前者即使文本里面有标签,也会显示标签,后者会编译文本中的标签进行显示
Methods
在data数据中添加键值对使得源数据的响应发生对应的改变
可以绑定文本字进行使用
键值表的使用
可以使用按键来触发事件
V-model和form表单的绑定
三个修饰符
.lazy 鼠标移开的时候才改变对应的值(输入完了懒加载搜索信息).number 自动格式 数据可以直接运算,只能针对数值
.trim 前后删除空格。
注意 插值 {{}}
是无法绑定标签的 只能加载一次 要绑定的话 必须加 v-model=”message”
复选框中加v-modle
将数据和表单标签进行绑定
V-bind
动态标签绑定
V-bing:属性 比如V-bing:src=”key” : width=”key”:绑定属性
@绑定事件
绑定样式
样式名的绑定 :class=’样式名称’样式名的绑定 :class=’[样式名称’,样式名称’]
样式名的绑定:class=’{样式名字,data中key}’ 是否显示 key:’true’
三元表达式的使用
[key?data中的key样式1:data中的key样式名字2]
判断组合
’[{样式名字,data中key},data中的key样式名字2]’ 是否显示
key:’true’
Style
样式绑定在data数据中
:style=’{ color:data的key }’ key必须在data中的数据有对应的值
Style
绑定json语句
:style=”fontStyle”.在data写个数组 键值对的形式 变成样式
其他的指令
V-Pre指令
使插值{{}}不生效。V-cloak外套,
是一种样式[V-cloak]{
Display:none
}
样式要放在script之前
V-once只显示一次
以上都是vue指令的内容
全局API
自定义指令
指令需要构造器,一些计算放在构造器在哪里自定义指令,就是v-自己定义的
@事件
后面jia是methods中的方法
指令生命周期
Bind被绑定
Inserted绑定到节点
以上是绑定的时候
Update组件更新
componentUpdated更新完成
绑定好了进行操作更新
Vue.directive(
‘wos’,{
}
如果构造器解绑了就不控制组件了
Vm.$destroy();
操作就没有了
)
一开始绑定的时候样式或者信息
更新的时候 操作时候 样式的修改
一般是在 bind 和update这俩个自定义的指令中设置
Vue.extend挂载
延伸构造器,最常用的页面头部Var vm=Vue.extend({
键值对
Template:”模板”,
Data:function(){
Return {
键值对
Message:”标签”
}
}
})
以上就是延伸
然后对延伸进行生效
就是将定义的值
Vm实例化出来,挂载到指定标签中
New vm().$mount(‘#id’)
V-set
创建一个json字符对象Var ong={
Key : value,
key:[
{},
{}
]
}
然后在构造器的data中引用当前的数据
Data:ogn,
那么ong里面的数据都会放在data中
不常用
、
数组名.push追加 数据 一般请求了数据就可以得到数组追加到后面响应的更新数据
响应式更新必须把方法写在,data的下方methods中才能对data的数据进行更新、
Methods:{
方法名:function(){
This.data中的数据=null;
}
}
Null代表数据不在内存中了,不在对其操作了
构造器生命周期
Vue的生命周期用户部署数据
生命周期是放在data数据的下面
前四个先初始化
脚本的数据写在 mounted、创建的时候,挂载的时候
前三个不允许任何操作
更新的记录
这是在点击销毁的时候”vm.$destroy();”
4,6,9用来更新数据
Teamplate模板
模板1.放在构造器的
Template:` <h1>最简单的模板</h1>`
嵌入到外部构造器
2. 标签的模板
<template id=”qq”></template>
引用外部的模板
1的构造器中将id放在` #id`中
3. 放在script中
不同的环境写不同的模板
组件-1Component
一种自定义标签使用自己的标签
1.直接全局Vue.component(‘标签名字’,{
Template:’源码’
})
只能在作用域,就是标签要在构造器中声明
Var component={
“内容”
}
2. 在构造器中声明的局部
Components:{
“world”:组件名称不需要””;
}
组件-2 props
把属性传入组件Props是一个组件
Var component={
“内容”;
Props:[‘插值内容’]
}
上面是直接写在属性的
我们可以用v-bind绑定data中的数据
验证数据
Props:{
}
数据验证的方式
组件-2 props
在一个组件中引入另外一个组件Var conpnentChid={
Template:`
<div></div>
`
}
Var component={
“内容”;
Components:{
“新标签名”:局部组件名称
}
}
父组件中引用子组件
组件-2 component标签
Vue已经写好的标签先挂载组件
如果需要插值的时候
可以在组件中定义方法data:function(){
Return{
A:’1’;
}
}
选项
propsData
开发环境数据测试而已
Computed:{
Message:funtion(){
Return this.mesage=’计算’;
}
}
名字就是处理后的数据返回放到名字中多个方法,号隔开处理数据。相当于data中的属性
计算后再显示出来。数据计算处理格式化。比如json数据经过处理再显示
Methods:{
}
这是事件的处理
改变原数据时候,其他数据会实时更新
Methods
如果简单的简单的操作Jia(1,$event)
鼠标事件
组件使用的变迁引用本地的方法
外部引用内部的方法
Vm.jia();
V-on的事件
V-on.click.stop阻止冒泡
V-on:submit.prevent 表单上使用 阻止返回上一个页面
V-on:click.captrue 捕获模式
修饰符可以串联起来
Native的修饰符
Watch
监控,监察数据的变化,控制返回值Watch:{
n:funtion(a,b){
//n是原来的那个数据data中的
A代表修改后的值
B代表之前的值
//通过判断ab来设置this.n的值
}
}
以上实在构造器的
可以写在构造器以外的
//一种策略模块化加载
Vm.$watch(n,function(a,b){
});
Mixin混入
Mixins:[aaa]Var aaa={
Created:fnction(){
This.message=”我被混入了”
}
}
先执行混入的再执行原装的
全局混入的
Vue.mixin({
})
日志管理,用户的行为和使用习惯
Extend
用来扩展新的 和混入差不多选项
Render
引用外部组件的时候This.parent.message父辈的message
Delimiters插值写法的改变
实例$
引入jq,可以在methods里面,或者生命周期中mounted:function(){}
实例就是vue对外的接口,数据操纵
实例事件
在外部创建方法
Vm.$on(‘函数名’,function(){}) 将方法放入构造器.$forceUpdate()
.$destroy
在外部调用构造器的方法
Vm.$emit(‘函数名’,参数)Vm.$onece只执行内部一次
Vm.$off(‘内部事件’)关闭内部方法或者事件
Vm.$nextTick(function(){
})
Slot
用于自定义标签的传值在现实的标签中加 slot属性
在模板中也加属性
一种好标签的内容扩展
内容到模板
Vue的Ajax
Vue-resource放在beforemount:function(){
This.$http.get(‘url’).then(response)=>{
},(response)=>{
}
}
Vue-else-if
Translation
标签
Css动画库
过滤器
Debounce=1000;防止输入过快攻击
ms 默认是300ms
延迟绑定数据
V-for和过滤器
默认显示
limitBy 第一个是显示的个数
第二个是从哪一个开始显示
从哪里找
使用
0是正序 -1是反序
相关文章推荐
- vue 学习笔记 part-4 ->v-on指令
- vue学习笔记之指令v-text && v-html && v-bind详解
- vue 学习笔记 part-3 -> v-bind指令
- 5.3.vue入门基础学习笔记-基础指令介绍(属性绑定v-bind)
- vue学习笔记 - 组件通信01
- Vue.js第四天学习笔记(组件)
- vue学习笔记(五)——指令
- vue 学习笔记 part-2->指令v-for
- Vue组件学习笔记
- vue学习笔记2——指令v-text && v-html && v-bind
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- Vue学习笔记进阶篇之函数化组件解析
- Vue 学习笔记 — 组件初始化
- Ionic学习笔记5_动态组件指令
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- vue学习笔记--父子组件通信
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- Vue.js学习笔记-1-组件
- vue学习笔记之——v-for与局部组件的传值
- FPGA学习笔记7-Quartus II其余的部分TCL指令