Vue.js基本语法的介绍

Jensen 发布于2019-08-21 10:48 / 2930人阅读

摘要：当表达式的值发生变化时，响应应用特定的行为到。指的是否重复，对重复的进行服用循环中，表示数组第个元素表示对象的样式绑定样式也可以根据中的变量来动态确定。

介绍

前段时间接触到一个库叫做Vue.js, 个人感觉很棒，所以整理了一篇博文做个介绍。
Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。
可以去这里下载。自己整理了一个Vue.js的demo，https://github.com/chenhao-ch/demo-vue

快速入门

以下代码是Vue.js最简单的例子，当 input 中的内容变化时，p 节点的内容会跟着变化。



  {{message}}

new Vue({
  el: "#demo",
  data: {
    message: "Hello Vue.js!"
  }
})

语法介绍 数据绑定

数据绑定就是指将js中的变量自动更新到html中。如下代码, message的默认值是“Hello Vue.js!”, 那么当页面启动时，html中的默认值会被设置成“Hello Vue.js”



  {{message}}

new Vue({
  el: "#demo",
  data: {
    message: "Hello Vue.js!"
  }
})

如果要输出原生的html，可以使用三个大括号来实现

{{{messageHtml}}}

也可以做表达式的绑定

{{length - 1}}
{{isShow ? "block" : "none"}}

过滤器

表达式后面可以添加过滤器，对输出的数据进行过滤。

{{ message | capitalize }}

自定义过滤器

Vue.js运行自己定义过滤器。比如:

Vue.filter("wrap", function (value, begin, end) {
  return begin + value + end;
})


{{ message | wrap "before" "after" }}

指令

指令是特殊的带有前缀 v- 的特性。当表达式的值发生变化时，响应应用特定的行为到DOM。

hello

bind , on 指令可以进行缩写

自定义指令

Vue.directive("demo", {
  bind: function () {
    // 准备工作
    // 例如，添加事件处理器或只需要运行一次的高耗任务
  },
  update: function (newValue, oldValue) {
    // 值更新时的工作
    // 也会以初始值为参数调用一次
  },
  unbind: function () {
    // 清理工作
    // 例如，删除 bind() 添加的事件监听器
  }
})

html模板

Vue.js支持对js对象进行判断(if), 循环(for)输出。类似于前端模板。


Yes
No


Hello!




  
    {{ $index }} : {{ item.message }}

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

样式绑定

样式也可以根据js中的变量来动态确定。

事件绑定

可以使用 v-on 指令来监听DOM事件。

new Vue({
  el: "#example-2",
  methods: {
    say: function (msg, event) {
      alert(msg);
      event.preventDefault();
    }
  }
})

常见的阻止冒泡，禁止默认行为等event方法可以通过修饰符来快速处理。

对特殊按键生效也可以使用修饰符

组件

组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。

通过Vue.extend()来定义一个组件，Vue.component()来注册组件。

// 定义
var Tree = Vue.extend({
  template: "This is a tree!"
});
// 注册
Vue.component("tree", Tree);
// 开始渲染
new Vue({
  el: "#box"
});

// 定义，注册可以合并成一步。下面的代码和上面一样
Vue.component("tree", {
  template: "This is a tree!"
});
new Vue({
  el: "#box"
});

渲染结果为：


  This is a tree!

还可以进行局部注册

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
  template: "...",
  components: {
    "my-component": Child
  }
})

props

props用于父组件向子组件传递数据。

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

动态props，当父组件的数据变化时，需要通知子组件跟着变化。

父子组件通信

当父组件数据变化时，可以通过props来通知子组件，子组件状态变化时，可以利用事件的冒泡来通知父组件。
子组件可以用 this.$parent 访问它的父组件。父组件有一个数组 this.$children，包含它所有的子元素。
例子：






  Messages: {{ messages | json }}

// 注册子组件
// 将当前消息派发出去
Vue.component("child", {
  template: "#child-template",
  data: function () {
    return { msg: "hello" }
  },
  methods: {
    notify: function () {
      if (this.msg.trim()) {
        this.$dispatch("child-msg", this.msg)  // 触发child-msg事件
        this.msg = ""
      }
    }
  }
})

// 启动父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
  el: "#events-example",
  data: {
    messages: []
  },
  // 在创建实例时 `events` 选项简单地调用 `$on`
  events: {
    "child-msg": function (msg) {  // 监听到 child-msg事件
      // 事件回调内的 `this` 自动绑定到注册它的实例上
      this.messages.push(msg)  // messages改变自动修改html内容
    }
  }
})

上面这种写法child-msg事件触发后，会冒泡到父组件，并执行父组件的child-msg events。
但是上面的的执行流程不够直观，可以在html中通过指定on事件来实现event的监听。下面是全部代码：





  Messages: {{ messages | json }}

构建大型应用

在典型的 Vue.js 项目中，我们会把界面拆分为多个小组件，每个组件在同一地方封装它的 CSS 样式，模板和 JavaScript 定义，这么做比较好。如上所述，使用 Webpack 或 Browserify 以及合适的源码转换器，我们可以这样写组件：

当然也可以使用预处理器，

云服务器 GPU云服务器 js基本语法 java基本语法 javascript基本语法 java基本语法学习

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

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

快速入门 - Vue2 Tutorials (一)

摘要：在这个组件里面有一些链接列表，和，这些列表直接使用编写按照传统的写法，如果我们需要往里面添加链接的时候，每次我们都得添加和标签。所以修改如下这样我们就把数据和视图分开了，模板里面的代码也简洁了很多，不再需要写很多重复的代码。 Vue 的官方文档对 Vue 介绍非常详细，但官方文档使用在 HTML 中引入 vue 的方式进行讲解，而实际项目中一般使用脚手架如 vue-cli 初始化项目...

djfml 2019-08-20 17:47 评论0 收藏0
Webpack 配置详解（含 4）——关注细节

摘要：由于这种差异我们将对预处理器文件的配置封装为函数，由参数生成对应配置，将文件放入文件内，将配置放在文件内。前言源代码熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置，但是为了满足我们的项目需求还是要自己进行配置，不过我们可以使用一些 webpack 的预设值。同时 webpack 也拆成了两部分，webpack 和 w...

jsbintask 2019-08-26 11:52 评论0 收藏0
Vue.js学习第一课

摘要：示例了解一门语言，或者学习一门新技术，编写示例是我们的必经之路。分割线元素是否渲染在中，取决于前面使用的是还是指令。添加完对象后，重置对象删一个数组元素 Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 MVVM模式下...

sf_wangchong 2019-06-27 16:34 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

liukai90 2019-08-21 17:05 评论0 收藏0