Vue的基础使用

vue

渐进式的前端框架

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

});

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

 

 

以上是 Vue的基础使用 的全部内容, 来源链接: utcz.com/z/378050.html

回到顶部