Es6
let 是变量
2.const 1. 是常量不能修改
创建的时候一定要赋值 要不报错
定义的类 里面的属性值可以修改
3.对象创建
1.可以先定义const name=1；
Const a={name};
输出a的话就是{“name”:1};
可以直接放进去函数
Const a={ Run(){ }, Set(){ } }
4. 遍历 遍历1 for(let i;i
遍历2 for(let i in data) //i 直接为data数据的下标
遍历3 for(let one of data) //one 直接为data相应的数据
5. 函数 ...nub //es6接收参数新特性
function A(...a){ console.log(a); } filter函数 //筛选函数 如果函数return true 那么将返回这个值 let e=n.filter(function(a) { if(a>30) return true; });
Map函数 //统一操作 Reduce(function(preValue,n),最开始的preValue值);
一、Vue基础知识
{{item}} movies:["asdsad","asdasds","asdasdsa"]
1.v-once 阻止响应式
2.v-html=”数据” 就可以智能实现将代码显示
3.v-text=”数据” 直接将数据显示出来
4.V-pre 将这个标签内的内容按html显示出来
5.v-cloak 标签斗篷，等vue函数真正管理这个组件的时候 因为有的时候电脑卡vue组件加载慢 等加载完以后这标签就自动去除了 配合css使用使用[v-cloak]{display:none}
6.v-bind:src=”data” 简写:src=”data” 动态绑定a img 标签的src属性 绑定解析data数据
7.
8.
9.v-for=”(item,index) in data” {{item}} //第一个数据 第二个下标 遍历data数组来将标签增加 并且通过{{item}} 来是内容显示到相应的标签上 1.:style=”{fontsize:’20px’}” //动态绑定css属性类 如果20px不加引号那么将认为他是变量 去data中寻找 如果找不到将会报错 1.:style=”[data1,data2]” //动态绑定css属性数组 data1:{font-size:”20px”}加引号
2.计算属性 调用的时候是{{zz}}不用加() //计算属性一般没有set方法 只读属性 get方法
13.v-on: 语法糖简写为 @click
+
函数传参
如果函数需要有参数
1.如果设置了小括号
1.有参数 那么参数为这个
2.如果没参数那么就是undifinde
2. 如果没设置小括号
1.那么参数就是事件event
+
//没加括号
+
//加括号
1.函数获取event事件
给函数实参加上$event 接收以后就是这个事件
1.函数冒泡事件
.stopt //停止冒泡
.prevent //阻止默认行为
@submit.prevent //阻止默认行为，没有表达式
@click.stop.prevent //串联修饰符
@keyup.enter=”onEnter” //键修饰符，键别名
@keyup.13=”onEnter” //键代码，键别名
.click.once //回调只会触发一次
1.v-if
aaa{{count}}
//如果为false那么不渲染上页面.
v-else-if
V-else
16.
代码复用 如果不加key的话那么复用的代码会重复显示 key值不一样的话就会避免这种情况 key值一样的话就会复用
1.
给lable标签加上for=“id” 以后点击lebel焦点自动定位到id为id的input上
1.v-show=“true” //决定是否显示在页面上 与v-if不同的是这个是加了dispaly：none 属性 v-if 不显示的话 就是代码注释了
1.V-for //遍历数组 v-for=”(item,index) in data” item是遍历的数据 index是遍历数据的下标
!!!遍历数组 第一个永远是value 第二个永远是index值
!!!遍历json 第一个永远是value 第二个永远是K值 第三个永远是index值
v-model //
1.数据双向绑定input标签
2.v-model与radio结合
1-如果几个input按钮 绑定的都是同一个v-model那么 name=” ”这个参数就 可以省略
2-
如果选中这个那么双向绑定的sex值就会是这个input的value
3.v-model与checkbox结合
1-如果被选中那么v-model就是true 相反则为false
并且可以设置小列子比如点击某个按钮以后才可以继续
2.如果panduan为
这种形式 那么v-model的 值为true 或者false
如果panduan为
这种形式，那么v-model的值为 这个复选框的value panduan的值将为一个数组
4.v-model与select结合跟v-model与radio结合一样
select如果加上属性multiple 就可以将下拉框里面的东西复选了 复选时得按ctrl键
5. v-model修饰符 v-model.lazy //当input标签失去焦点的时候才会改变这个 v-model值
6. v-model 修饰符 v-model.number //因为v-model将得到的值自动转换为string 所以加一个修饰符的话就可以将这个字符串转化为number类型
7.v-model 修饰符 v-model.trim //可以去除字符串首尾的空格
event.target.value; //目标事件中的value值
Vue组件开发
1.创建组件构造器 //子模板中最外层必须被div标签包裹要不报错
const cpnc=Vue.extend({ template:` wojinlaila ` })
1.注册组件（全剧组件）
Vue.component("cpn",cpnc);
1.注册组件（局部组件） //在components属性中注册
const app=new Vue({ el:"#aaa", components:{ cpn:cpnc } })
1.父子组件 //在组件里面写components属性
const cpnc=Vue.extend({ template:` wojinlaila `, components:{ aa22:cpnc1 } })
1.应用组件
1.必须在Vue管理的组件下使用
2.语法糖 //可以不用组件构造器 而直接用里面的数据来调用（本身就自 己运行了extend Vue组件构造器）
Vue.component("cpn",{ template:` wojinlaila `, components:{ aa22:cpnc1 } });
(2)
const app=new Vue({ el:"#aaa", components:{ cpn:{ template:` wojinlaila `, components:{ aa22:cpnc1 } } } })
1.组件模板放在
</div><div>
里
1.格式
<script type="text/x-template" id="muban"> <div> <p>321321</p> </div> </script>
- 1.用法
components:{ cpn:{ template:"#muban"//直接把script 模板标签”#id”仍在这就 行 } }
1.组件放在
<template id="muban">
里//跟上面那种一样
2.组件模板常量
不能通过Vue中的data数据中获得
获取变量得是这样 在组件构造中应用data(){return {data:data}}函数
{ template:"#muban", data(){ return { title:"woshibiaoti" } } }
创建一个公共变量则需要在外面定义一个obj data函数返回的时候返回 return这个obj就可以
组件模板方法
跟组件中的方法定义一样 只是定义在了模板组件构造器中
父子模块的信息传输 //用驼峰标识的话可能会报错
父传子方式一//数组
给儿子定义一个props属性 props:["title"]
调用的时候直接在模板标签里面 这样绑定
第一个title是子模块的props中的数据
第二个title是父模块中的数据
模块中使用的时候直接跟Vue实例中使用变量的方法是一样的
2.父传子方式二//json
调用方式跟数组一样
Default属性//默认值
required属性//必传项
3.数据类型是对象或者数组的时候，默认值必须是一个函数 //因为有的 会报错
1.子传父
子：在方法函数里面设置this.$emit("自定义事件",data);
父：在创建子模板标签里加上监听 //函数不用加括号 即使传参了也不加
父亲的方法里面得有参数
父子互传
父访问子
this.$children //添加在父亲方法里面的得到子模板的所有属性
this.$refs //给子模板标签添加ref=”自定义” 属性 父亲通过方法调用 this.$refs就可以得到这个子模板的属性
子访问父
this.$parent //在子方法里面得到父模板的所有属性
this.$root //在子方法里面得到父模板的所有属性
插槽使用
子模板中定义默认值这个语句
使用子模板标签时 在内部定义的内容都会传到子模板的slot中
如果调用时内部没有定义东西那么子模板中的slot标签中的东西就会变成默 认值
插槽具名使用
默认值 //给子模板中的slot标签加上name 属性
调用子模板标签时里面的内容奥术大师
如果调用调用子模板属性中的东西时 属性里面没有slot属性 或者属性不一样那么就不会套进插槽里面
