Vue备忘

Vue-cli的安装

  1. 安装2.x npm i -D vue-cli
  2. 安装3.x npm i -D @vue/cli

利用cli创建项目:

  1. 2.x vue init webpack appName
  2. 3.x vue create appName
  3. 3.x 中一种方式:vue ui 它将自动启动浏览器8000端口,可以使用图形化的方式进行项目的创建和管理。

事件处理中的this

greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }

渲染错位的问题

在Vue中对<li>、<tr> 和 <option>有着较严格的约束,其只能出现在指定的父元素中,如:

<table>
            <book></book>
        </table>

会导致渲染出错,此时可以采用如下方式(关键是is="book")

 <table>
            <tr v-for="book of books" is="book" :book="book"></tr>
     </table>

但注意:当子组件是来自于.vue文件的,是不存在上述问题的。

Vue的动画,css设定技巧:

  1. 设置:“进入后”的动画和“”离开时“的动画(以fade为例)
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

说明:进入和离开的动画效果为:透明度的变化在0.5秒完成

  1. 设置:”进入前“的状态和”离开后“的状态(注:该类在进入和离开后,将被删除)
fade-enter, .fade-leave-to {
  opacity: 0;
}

说明:进入动画开始前和离开动画结束后,透明度为0。(隐含:离开动画开始前和进入动画结束后,透明度保持元素现有状态)

template的另一种优雅的使用方式:

<script type="text/x-template" id="temp1">
        <div>
        <!-- content -->
        </div>
    </script>
    <script>
        Vue.component("demo1",{
            template:'#temp1'
        });
  </script>

渲染函数

可以使用render渲染函数取代template的定义,它更接近于编译器底层,同时这将使得模板代码的定义极具灵活性:

render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子元素数组
    )
  },

上面代码,传入一个createElement函数,它的返回结果是一个VNode。

createElement函数的使用:

其返回一个VNode元素,使用方式如下所示:

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串,组件选项对象,或者
  // 解析上述任何一种的一个 async 异步函数。必需参数。
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 你可以在 template 中使用这些特性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子虚拟节点 (VNodes),由 `createElement()` 构建而成,
  // 也可以使用字符串来生成“文本虚拟节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

$slot的使用

在“组件标签”的使用,会以上两种形传入slot

<my-comp>
<p slot="a">slot a</p>
this is default slot
</my-comp>

此时可以在template中可以使用如下方式获取:

template:'<div>this is default :<slot></slot></div>'

在render中,可以:

render:function(createElement){
  let default=this.$slots.default;
  let a=this.$slots.a;
}

axios的基本使用:

const axios =require('axios');

axios({
    method: 'post',
    url: 'http://localhost:3000/users',
    data: {uname:'ba'},
    headers:{"Action":"do"}
}).then(function (resp) {
    console.log(JSON.stringify(resp.data));
}).catch(function (err) {
    console.log(err);
});
  1. 它可以在浏览器和node环境中使用
  2. 它会智能的根据data的特点,设置Content-Type和Accept头

简单演示Vue-Router的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="app">

        <router-link to="/">go home</router-link>
        <router-link to="/about">go about</router-link>
        <hr>
        <router-view></router-view>
    </div>

    <script>
        let home={template:'<h1>home</h1>'}
        let about={template:'<h1>about</h1>'}
        let router=new VueRouter({routes:
                [{path:'/',name:'home',component:home},
                    {path:'/about',name:'about',component:about}
                ]})

        new Vue({router:router,el:'#app'})

    </script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue和webpack俨然成为前端市场的主导 但是很多来我这里面试的小伙伴依然不知道怎么去搭建vue的开发环境 ...
    吴佳浩阅读 8,700评论 1 25
  • webpack-4.x 安装 npm i webpack -g: 全局安装webapck 基本使用 不使用配置文件...
    duans_阅读 5,697评论 0 12
  •  1、let view = new view({ }) 或者直接 new view({ })2、VUE只识别第一个...
    沉默的废柴阅读 2,675评论 0 0
  • 前言 已经有很多分析Vue-cli搭建工程的文章,为什么自己还要写一遍呢。学习就好比是座大山,人们沿着不同的路登山...
    若川i阅读 7,222评论 0 7
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 8,113评论 1 4