继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue,vue,vue,vue,vue,

欧米雪儿lyy
关注TA
已关注
手记 33
粉丝 64
获赞 315
1. vue 的三个特点:
数据双向绑定,组件化,单文件组件

2、vue的基本概念

全局api:  vue.extend, vue.set
实例选项: new Vue()  el,data,compents都是vue实例选项
实例属性和方法: vm.$on,vm.$data  在$都是vue的实例和方法
指令:directive
内置组件:<components></compontents>
<keep-alive></keep-alive> <router-view></router-view>

3、功能接口
v-for = (item,index) in arry;//item 数组的每一项, index:数组的索引;
v-for = (value,key) in obj // value:对象的值,key对象的属性;
数组中不可用的方法:
slice,concat;直接修改数组list[i] = 值,不可以这样直接修改;
Vue.set(数组,索引,{值}) vue的全局方法set来更改数组的某一项的值

// 标签属性和条件渲染
标签属性:  v-bind:href='link";动态绑定;
条件渲染: v-if,v-else,v-show;

// 事件绑定-内置事件绑定,自定义事件绑定
@:click 事件绑定;
自定义事件绑定: 父组件自定义事件   
<my-compented  @my-event='toggle'></my-compented>
子组件触发 my-event 自定义事件;this.$emit('my-event', opation);
父组件执行toggle 函数;

// 计算属性和数据监听
computed选项 -计算属性:根据我们调用属性来跟新,调用的属性没有变更,
         我们computed选项里面的方法读取的是缓存;

// 组件的通信
<p   :is = "动态的组件名"></p> 动态绑定组件

子组件props接受的两种形式:
数组:
     ['first-name','two-name'] ,从父组件传递两个属性值;
     动态展现{{firstName}}
对象:
    {
        'first-name':[number,string]//接受的类型可以是number或者string;
    }

// slot:插槽
父组件插件里面定义的内容放到子组件slot中:
<a-parent>
    <p slot='header'>我是父组件header</p>
    <p slot='footer'>我是父组件footer</p>
</a-parent>
子组件
<b-children>
    <slot name= 'header'></slot>
    <p>it is children content</p>
     <slot name= 'footer'></slot>
</b-children>

//  vue高级功能--过渡和动画
<transition name = 'fade' mode='out-in'>
    // 过渡效果要一定的条件
    多元素过渡:如果标签名相同,我们需要指定一下key,否则没有效果;
    <p v-if = 'ishow' key='1'></p>
    <p v-else key='2'></p>

    <div v-if=''></div> 或者
    <div v-show = ''></div>或者
    <div :is='currentViews'></div>动态组件
</transition>

// 自定义指令:
<input type='text' v-foucus>
directive:{
    foucus: {
        inserted(el,bind){
            el.foucus()
        }
    }
}

4、 环境搭建和常用插件

---- 使用 vue-cli的优势:
    成熟的vue项目架构设计;
    本地测试服务器; 
    集成打包上线方案 webpack

    使用vue-cli的系统要求:
    node.js  (>=4.x);
    git
    一个能使用node的命令行终端 git bash  或者cmd

npm install vue-cli -g :全局安装vue-cli
vue init webpack my-project :初始化项目
npm install 安装项目依赖

npm run dev:在localhost启动测试服务器;
npm run bulid 生成上线目录(部署)

5. vue-router (设置路由) vue 的插件
 npm install vue-router --save  安装 vue-router

 import VRouter from ‘vue-router’ : 在入口页引入vue-router;
 Vue.use(VRouter );  Vue.use注册使用vue-router
 引入router,我们需要实例化这个router类,
 let router = new VRouter({ // 定义自己项目的router变量;
})

new Vue({
  el: '#app',
  router:router,
  template: '<APP/>',
  components: {APP}
})
打开App,阅读手记
14人推荐
发表评论
随时随地看视频慕课网APP