Vue的基础使用
前端框架和库的区别
功能上的不同: 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(''); }); //使用跟 局部过滤器一样
