渐进式的前端框架
vue react augular 作者: 尤雨溪 facebook 谷歌公司
前端框架和库的区别
功能上的不同:
jquery库：包含DOM(操作DOM)+请求，就是一块功能。
art-template库：模板引擎渲染，高性能的渲染DOM (我们后端的一种模板 跟python 的模板类似)
框架：大而全的概念，简易的DOM体验+请求处理+模板引擎
在KFC的世界里，库就是一个小套餐，框架就是全家桶。
代码上的不同:
一般使用库的代码，是调用某个函数或者直接使用抛出来的对象，我们自己处理库中的 代码。
一般使用框架，其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。
框架的使用:
初始化自身的一些行为
执行你所编写的代码
释放一些资源
vue的起步
引包
创建实例化对象
new Vue({
el:'#app',//目的地
data:{
msg:"hello Vue"
}
});
/*
{{}}: 模板语法插值
{{变量}}
{{1+1}}
{{'hello'}}
{{函数的调用}}
{{1==1?'真的':'假的'}}
*/
vue的指令系统
常用 vue-text vue-html v-if v-for v-show v-bind v-on
v-if和v-show的区别
v-if:是真正的条件渲染,因为它会确保在切换的过程中,条件块内的事件监听器和子组件适当的 被销毁和重建. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 //保存数组或者对象 格式 v-for = '(item,index) in menuList' v-for = '(value,key) in object' //item指的是数组中每项元素
vue的局部组件使用
打油诗: 1.声子 2.挂子 3.用
//1.声子
var App = {
tempalte:`
<div class='app'></div>`
};
new Vue({
el:"#app",
//3.用子
template:<App />
//2.挂子
components:{
App
}
})
父组件向子组件传递数据:通过prop
1.在子组件自定义特性。props:['自定义的属性1','自定义属性2'] 当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样 2.要在父组件中导入的子组件内部 绑定自定义的属性 <Vheader :title = '父组件中data声明的数据属性'/>
如何从子组件传递数据到父组件
1.给子组件中的某个按钮绑定原声事件,。我们可以调用内建的 this.$emit('自定义的事件名','传递的数据')，来向父级组件触发一个自定义的事件.
2.在父组件中的子组件标签中 要绑定自定义的事件,
vue中全局组件的使用
Vue.component('全局组件的名字',{
跟new Vue() 实例化对象中的options是一样，但是要注意：
不管是公共组件还是局部组件 data必须是个函数 函数一定要返回 {}
})
局部过滤器的使用
//1.注册局部过滤器 在组件对象中定义
filters:{
'过滤器的名字':function(value){
}
}
//2.使用过滤器 使用管道符 |
{{price | '过滤器的名字'}}
全局过滤器的使用
// 注册全局的过滤器
//第一个参数是过滤器的名字，第二个参数是执行的操作
Vue.filter('reverse',function(value) {
return value.split('').reverse().join('');
});
//使用跟 局部过滤器一样