vue.js最详细的基础语法值得收藏！

介绍

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

Vue发音/vju:/，类似于view。是一个数据驱动的web接口库。Vue.js只关注视图层，它可以很容易地与其他库集成。压缩后的代码只有24kb。

你可以在这里下载。我组织了一个https://github.com/chenhao-ch/demo-vue vue . js的演示

快速启动下面的代码是Vue.js最简单的例子当输入的内容发生变化时，P节点的内容也会随之变化。

！-html-div id=' demo ' p { { message } }/p input v-model=' message '/div new Vue({ El : ' # demo '，data : { message : ' Hello Vue . js！'}})语法介绍

数据绑定数据绑定是指自动将js中的变量更新为html。根据下面的代码，消息的默认值是“hellowue.js！”，那么当页面开始时，html中的默认值将被设置为“hellowue.js”

！-html-div id=' demo ' p { { message } }/p input v-model=' message '/div new Vue({ El : ' # demo '，data : { message : ' Hello Vue . js！'}})如果想输出原生html，可以用三个大括号来实现

p{{{messageHtml}}}/p

您也可以绑定表达式

div{{length - 1}}/divdiv{{isShow？block' : 'none'}}/div

可以在过滤器表达式之后添加过滤器来过滤输出数据。

div{{ message |大写}}/div

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

Vue.filter('wrap '，function (value，begin，end){ return begin value end；})!-'vue'='前vue后'-span { { message | wrap ' before ' ' after ' } }/span指令

指令是前缀为v-。当表达式的值改变时，响应将特定的行为应用于DOM。

！-p问候为真时显示p节点-p v-if='问候' hello/p！-binding href属性是js-av-a v-bind : href=' URL '/a URL '/a！-绑定事件，btnClick是js方法-button v-: click=' BTN click '/button bind，on指令可以缩写

a v-bind : href=' URL '/a a a : href=' URL '/a按钮on:click=单击'/b按钮按钮@ click=单击'/b按钮自定义命令

Vue.directive ('demo '，{ bind : function(){//准备工作//例如，添加只需运行一次的事件处理程序或代价高昂的任务}、update: function (newValue，OldValue) {//值更新时的工作//也将以初始值为参数调用一次}、unbind: function () {//清理工作//例如，删除bind()})html模板添加的事件侦听器

Vue.js支持判断(if)和循环(for)js对象。类似于前端模板。

！-判断，如果ok为真，则显示yes如果为false，则no-h1v-if=' ok ' yes/h1h v-else no/h1！-类似于v-if，v-if是是否添加节点，v-show是是否显示为none-h1v-show=' ok '你好！/h1！-loop，循环items属性。跟踪依据是指项目是否重复，取重复的项目-！-在循环中，$index表示数组的第n个元素；$key表示对象的键-ul id=' example-1 ' liv-for=' items ' track-by=' _ uid ' { $ index } } : { { item。message } }/Li/Ulvar example 1=new vue({ El : ' # example-1 '，data : { items :[{ _ uid : ' 1 '，message3360' foo'}，{_ uid:' 2 '，message:' bar'}]

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

！-当isa为true时，该类还有一个class-a-div class=' static ' v-bind : class=' { ' class-a ' : isa，' class-b' : isb}'/div！-a类和b类设置为class-div v-bind : class='[a类，b类]'！-绑定样式，自动添加前缀，style object-div v-bind : style=' style object '/div事件绑定中有样式键值对

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

div id='example-2 '按钮v-: click=' Say(' Hi '，$ event)' Say Hi/按钮按钮v-: click=' Say(' What '，$ event)' Say What/button/div new Vue({ El : ' # example-2 '，methods : { Say : function(msg，event){ alert(msg)；event . preventdefault()；}}})常用的防止冒泡、禁止默认行为等事件方法可以通过修饰符快速处理。

！-不冒泡-a v-:点击。stop=' do'/a！-禁止冒泡和默认行为-a @ click。停下来。当特殊键生效时，还可以使用prevent=' do'/a修饰符

！-键码从13开始。-input v-: keyup . 13=' submit '/input v-: keyup . enter=' submit '/！-支持的键名有：enter、tab、delete、ESC、space、up、down、left、right-component system是Vue.js的另一个重要概念，因为它提供了一个抽象，允许我们用独立的可重用小部件构建大规模的应用程序。

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

div id=' box ' tree/tree/div//define vartree=vue . extend({ template 3360 ' div这是一棵树！/div ' })；//注册Vue.component('tree '，Tree)；//开始渲染新的Vue({ El : ' # box ' })；//定义、注册可以合二为一。下面的代码与上面的vue相同。组件(' tree '，{template :' div这是一棵树！/div ' })；new Vue({ El : ' # box ' })；渲染结果是：

div id=' box ' div这是一棵树！/div/div也可以在本地注册

Varchild=vue。扩展({/*.*/}) varparent=vue。extend ({template3360 ' . '，components 3360 { ' my-component ' 3360 child } })道具道具用于父组件将数据传递给子组件。

Vue.component ('child '，{ prop s 3360[' child msg ']，//prop可以用在模板中//您可以用this.msg ')设置template 3360 ' span { { child msg } }/span ' }；child child-msg=' hello '/child dynamic props，当父组件的数据发生变化时，需要通知子组件进行相应的变化。

输入v-model='父消息'/子v-bind:子消息='父消息'/子父子组件通信

当父组件的数据发生变化时，可以通过道具通知子组件，当子组件的状态发生变化时，可以通过事件的冒泡通知父组件。

子组件可以用这个访问它的父组件。$家长。父组件有一个这样的数组。$children，包含其所有子元素。

示例：

！-子组件模板-模板id=' child-template '输入v-model=' msg '按钮on:点击=' notify '调度事件/按钮/模板！-父组件模板-div id=' events-example ' p messages : { { messages | JSON } }/p child/child/div//注册子组件//将当前消息分发给Vue.component('child '，{ template: '#child-template '，data : function(){ return { msg 3360 ' hello ' }，methods 3: { notify 3: function(){ if(this . msg . trim()){ this。$dispatch('child-msg '，This.msg) //触发child-msg事件this . msg=' ' } } } })//)//启动父组件///将事件推入数组varparent=new vue({ El : ' # events-example '，data : { messages 3360[]}，//创建实例时，` events '选项只需调用` ` `$ on ` events 3360 { ' child-msg ' :函数(msg){//就能听到child-msg事件//自动绑定到此。messages.push (msg)//messages更改并自动修改html内容}}})通过上述方式，在触发子-msg事件后，其执行方法并不直观。因此，可以采用v-on绑定事件。

！-当子消息被触发时，父组件的handleIt方法被执行。-child v-: child-msg=' handlet '/child构建大型应用程序

在一个典型的Vue.js项目中，我们将接口拆分成几个小的组件，每个组件都将其CSS样式、模板和JavaScript定义封装在同一个地方，这样做比较好。如上所述，使用网络包或浏览器和适当的源代码转换器，我们可以编写这样的组件：

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

本文已整理成《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。