Vue的基础使用

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部