频道导航

最细致的vue.js基础语法值得收藏!

2018-12-30 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了最细致的vue.js基础语法值得收藏!，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

介绍

前段时间接触到一个库叫做Vue.js,个人感觉很棒，所以整理了一篇博文做个介绍。

Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。

可以去这里。自己整理了一个Vue.js的demo，

快速入门

以下代码是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}}}

也可以做表达式的绑定

404_43@{{length - 1}}

@H_404_43@{{isShow ? 'block' : 'none'}}

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

404_43@{{ message | capitalize }}

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

'before vue after' --> {{ message | wrap 'before' 'after' }}

指令

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

bind,on指令可以进行缩写

<button v-on:click="btnClick">
<button @click="btnClick">

自定义指令

html模板

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

No

<h1 v-show="ok">Hello!

<ul id="example-1">
<li v-for="item in items" track-by="_uid">
{{ $index }} : {{ item.message }}

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

样式绑定

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

<div v-bind:style="styleObject">

事件绑定

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

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

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

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

组件

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

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

<div class="jb51code">
<pre class="brush:xhtml;">
<div id="box">

// 定义 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 Parent = Vue.extend({
template: '...',components: {
'my-component': Child
}
})

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

{{ childMsg }}' });

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

父子组件通信

当父组件数据变化时，可以通过props来通知子组件，子组件状态变化时，可以利用事件的冒泡来通知父组件。

子组件可以用this.$parent访问它的父组件。父组件有一个数组this.$children，包含它所有的子元素。

例子：

<div class="jb51code">
<pre class="brush:js;">

<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event

<div id="events-example">

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事件触发后，的执行方法不直观。所以可以采用v-on绑定事件。

构建大型应用

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

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

》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/vue/44669.html

vue.js入门语法 vue.js基础知识 vue.js基础语法

上一篇：利用纯Vue.js构建Bootstrap组件下一篇：基于Vue2的移动端开发环境搭建详解

猜你在找的Vue相关文章

elementui的el-tree第一次加载无法展开和选中的问题

问题现象 elmentui的el-tree数据加载问题，导致第一次加载选中当前节点和高亮当前节点没有...

作者：前端之家时间：2021-02-17

VSCODE打开一个文件，另一个文件就关闭的问题的解决方法

因为刚打开文件，vscode默认是预览状态，如果编辑过之后，就不会有这个问题。可以通过双击...

作者：前端之家时间：2021-02-17

一文带你学会国产加密算法SM4的vue实现方案

前言上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下...

作者：前端之家时间：2021-02-17

解决vue报错：Module build failed (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js): TypeError: Cannot read property 'range' of null

在项目中引入动态路由时报错写法: 报错: Module build failed (from ./node_modules/_esl...

作者：前端之家时间：2021-02-17

vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题

问题产生在使用babel编译es6时，遇到报错Uncaught ReferenceError: regeneratorRuntime i...

作者：前端之家时间：2021-02-17

element-UI中手动调用table排序

&lt;el-table :data=&quot;tableData&quot; &quot;width...

作者：前端之家时间：2021-02-17

Vue双向绑定原理及其实现

在之前面试的时候被面试官问到是否了解Vue双向绑定的原理，其实自己之前看过双向绑定的原理...

作者：前端之家时间：2021-01-10

Vue事件修饰符详解

整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是...

作者：前端之家时间：2021-01-10

Vue-router插件使用

单页面原理 Vue是单页面开发，即页面不刷新。页面不刷新，而又要根据用户选择完成内容的更...

作者：前端之家时间：2021-01-01

Vue 分支循环

v-for 通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。如果数据是对象类型...

作者：前端之家时间：2021-01-01

最新文章