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('');

});

 

//使用跟 局部过滤器一样