前端学习 总结 之 vue 2

--------------条件渲染(控制标签)--------------


控制标签的显示true或者隐藏(false ---销毁这个标签)
v-if="bool"    条件为真显示内容
v-else='bool'  条件为假显示内容
v-show="bool"   不会销毁标签 效率高


------------数组和对象渲染(遍历列表和字典)
v-for="value in mylist"
v-for="(x1, x2) in mylist"


阻止事假冒泡: @click.stop
阻止表单自动提交  @click.prevent

v-model  表单数据绑定(双向数据绑定)

----------------------绑定表单-----------------------
单选 : type="radio" v-model="sex"
多选:  type="checkbox" v-model="mylist" (列表存value值)
复选 : type="checkbox"


-----------------------计算属性-监听属性--------------


计算属性: 若用methods需要绑定点击属性.此法直接返回计算数据
在html中用函数名得到结果;
computed:{
    fnRe:function(){return  计算表达式}
}


监听属性: 在控制台可以监听html中num数据的上一次数据和本次数据 | 分开


watch: {
    num: function (x1, x2) {console.log(x2 + '|' + x1)}
}


-----------------------过滤器------------------------


定义全局过滤器 : 在创建对象之前去定义:
Vue.filter('名字',function(value){})


局部过滤器 : 在对象里创建
filters : {
    名字:function(value){}
}


-----------------------自定义过滤器-------------------


 // html5.0 中  autofocus 自动获得焦点 
在创建对象之前创建: 文本框标签  v-myfocus(绑定指令)


Vue.directive('myfocus', {
    inserted: function (el, binding) {
        el.focus()
        console.log(binding)
    }
})


-------------------------ES6中变量问题----------------------


低版本中 变量不支持预解析 弹框 undefind
ES6中 : let定义变量 预解析 会报错
        const 预解析变量 也 会报错
         -----也定义常量 不能修改的变量(用于身份证之类)


-------------------------ES6箭头函数----------------------


ES6中 箭头函数的作用是可以在对象中绑定this，
解决了JavaScript中this指定混乱的问题 
一个参数 : a => {}   没有参数 : () =>
var fn3 = (a, b) => {
    var rs = a + b
    alert(rs)


ES6中加入了模块的功能,ES6中，一个js文件就是一个模块，不同的是，
js文件中需要先导出(export)后，才能被其他js文件导入(import)


-------------------------注册组件-----------------


// Vue.component('组件名字', {'html、css、js'})


使用template标签来定义html部分:
template: '<h2>我的组件1  h2</h2>'


data 必须是函数
props传递数据


如果想给组件中传递参数，
组件要显式地用 props 选项声明它预期的数据


样式中如果有scope关键字，表示这些样式是组件局部的，不会影响其他元素