Vue快速入门

stdying 发布于2019-08-22 16:47 / 2342人阅读

摘要：的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。结果更改检测现在是响应式的不是响应式的对于已经创建的实例，不能动态添加根级别的响应式属性。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue单文件组件

模板数据绑定


Message: {{ msg }}

这个将不会改变: {{ msg }}









{{ number + 1 }}
{{ ok ? "YES" : "NO" }}
{{ message.split("").reverse().join("") }}




{{ message | capitalize }}



{{ message | capitalize }}

表单输入绑定


Message is: {{ message }}

更多参见：https://cn.vuejs.org/v2/guide...

computed 与 watch

样式 class与style绑定

class

style

条件渲染


 Yes 



  Now you see me


  Now you don"t

div v-if="type === "A"">
  A

Not A/B/C

Hello!

列表渲染


  
    {{ item.message }}
  


var example1 = new Vue({  
   el: "#example-1",  
   data: {   
      items: [      
         { message: "Foo" },      
         { message: "Bar" }    
       ]  
  }})

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。


  
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  


var example2 = new Vue({
  el: "#example-2",
  data: {
    parentMessage: "Parent",
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
})

结果：

v-for 通过一个对象的属性来迭代。

  {{ index }}. {{ key }}: {{ value }}

new Vue({
  el: "#v-for-object",
  data: {
    object: {
      firstName: "John",
      lastName: "Doe",
      age: 30
    }
  }
})

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
结果：

更改检测

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
  data: {
    userProfile: {
      name: "Anika"
    }
  }
})

可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, "age", 27)

还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

vm.$set(vm.userProfile, "age", 27)

事件绑定

Mixins

// 定义一个混合对象
var myMixin = {
   created: function() {
      this.hello()
   },
   methods: {
      hello: function() {
         console.log("hello from mixin!")
      }
   }
}

// 定义一个组件， 使用这个混合对象
var Component = Vue.extend({
   mixins: [myMixin]
})

插件

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive("my-directive", {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

注册组件

局部注册组件

全局注册组件

// a.vue


// myComponent.vue


// main.js
import MyComponent from ./myComponent""
// 全局注册
Vue.component("my-component",  MyComponent);
// 创建根实例
new Vue({
   el: "#example"
})

Props


// 动态props

// 双向绑定

// 单次绑定

Vue.component("child", {
  // 声明 props
   props: ["msg"],
  // prop 可以在模板内
  // 可以用 `this.msg` 设置
  template: " {{msg}}"
})

slot

  我是子组件的标题
  
    只有在没有要分发的内容时才会显示。

// 父模板

我是父组件的标题

这是一些初始内容

这是更多的初始内容

// 渲染结果

我是父组件的标题

我是子组件的标题

这是一些初始内容

这是更多的初始内容

具名插值

GPU云服务器云服务器 vue入门教程前端快速入门云计算快速入门 css快速入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94658.html

vue.js快速入门

摘要：但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。不知道还要不要再来一个快速入门，发展得挺快，东西也像类似的全家。以前看到多少天学习系列，我都深感烦躁，短短几天怎么可以精通，那是对于他们而言。但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。回到vue本身...

MkkHou 2019-08-20 10:45 评论0 收藏0
前端必须要珍藏的技术文章和面试题

摘要：前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下前端工程师日常工作所需要的学习资料查找，帮助学习者快速掌握前端工程师开发的基本知识编程始于足下记住再牛逼的梦想也抵不住傻逼似的坚持蝴蝶前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下web前端工程师日常工作所需要的学习资料...

MoAir 2019-08-26 10:29 评论0 收藏0
Vue.js快速入门

摘要：今年以来，的文档更新很快完善社区也日渐状大，再加上于某厂你懂的大力的推广，的前景十分光明。一般情况下，中小型的系统从迁移到版本大概只需要天的时间。快去动手尝试吧原创新书移动前端高效开发实战已在亚马逊京东当当开售。作者：晓飞（沪江Web前端开发工程师）本文原创，转载请注明作者及出处 Vue.js框架已经火了好长一段时间了，早在2015年的双11中，淘宝的部分导购业务——如：双十一晚会摇...

KitorinZero 2019-08-20 19:06 评论0 收藏0
vue.js快速入门

摘要：的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的中英文都有提供快速入门准备地址地址没错就只需要这两个就可以开发了是核心文件，在这里只是为了提高开发效率而引用的，是可选的。专门存储一些数据的属性，数据一定是对象格式。 **关于前阵子的文章错误有点多所以从新修改了并添加了一些在官方脚手架vue-cli开发时需要注意的事项，Vue.js是一个轻巧、高性能、可组件化的MVVM库。...

dantezhao 2019-08-20 13:46 评论0 收藏0