初步认识Vue.js

So11ude
249 阅读2分钟

创建vm对象

let vm = new Vue({
          el: "#div1", //根元素
          data: { name: "test_name" },
        });

视图层（HTML）写相应代码

输出

vue表达式 {{ }} (只能在html中输出）

双向绑定

v-model

属性绑定

v-bind:属性=数据 <span v-bind:title="txt">span标签</span> <span :title="txt">span标签</span> :style='json' :class='array'

事件

v-on:xxx=函数 v-on:click="fnClick" @click="fnClick"

事件修饰符

@事件.xxx @submit.prevent="fn"

循环

v-for:"val,key in 数组"

<li v-for="item,index in users">
    <i>{{index}}</i> 
    NAME:{{item.name}},AGE:{{item.age}}
</li>

条件渲染

v-show: （有更高的初始渲染开销）

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。

v-if: （有更高的切换开销）

  1. 真正的条件渲染（它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建）
  2. 惰性（如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块）

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

image.png

计算后数据/属性

并不存在的数据，其实是个公式 有缓存 （更适合同步操作）

应用：

  • 频繁使用的复杂公式
  • 需要监控的：全局状态管理

（不是必须的）

简写：

computed: {
    result() {
      return this.n1 * this.n2;
    },
}

完整版：

computed: {
    result() {
      set: function() {},
      get: function() {},
    },
}

建议所有的异步操作都在函数里完成

监听 watch

（更适合异步操作）

image.png

  watch: {
    a(newVal, oldVal) {
      console.log(`a变了,${oldVal}=>${newVal}`);
    },
  }

路由

参数

  1. #/xxx/:x/:x?a=xx&b=xx
  2. route.params
  3. route.query

事件

beforeRouteUpdate(to, from, next)

嵌套路由

命名路由

json=>{name: '名字', params: {}, query:{}}

vue-router

用法

渲染容器：<router-view></router-view> router的component会被渲染到里面。 路由跳转：<router-link to='xxx'>文字</router-link>

JS操作路由

this.$router.go(-3); this.$router.push('/user');

路由参数

path：'/user/:id' $route.params.id

监听跳转

  1. watch不推荐
  2. component里面加beforeRouteUpdate
beforeRouteUpdate(to, from, update){
//走
next();

//不希望路由切换
//next();
}

vue-cli

  • 开发环境
  • 检测代码质量
  • 打包，编译
  • 测试

包含组件

  1. 编译
  • postcss, autoprefixer: 编译CSS
  • babel: 编译ES6
  • webpack: 编译
  1. 测试
  • *-loader: 热编译
  • eslint: 代码质量
  • jest: 单元测试
  • neightwatch: e2e测试
  1. 其他
  • chalk: 命令行高亮

工程目录

  • .babelrc babel配置
  • .editorconfig 编辑器配置
  • .eslintignore eslint忽略列表
  • .eslintrc.js eslint配置
  • .gitignore git忽略列表
  • .postcssrc.js postcss配置
  • package.json node配置
  • README.md 说明
  • index.html 入口文件
avatar
文章
阅读
粉丝