码迷,mamicode.com
首页 > 其他好文 > 详细

vue基本语法

时间:2018-03-22 23:51:10      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:head   rev   set   语法   实现   ret   charset   指令   点击   


    使用"{{ }}"来插入文本
    使用v-html来插入html元素
    v-bind给元素绑定属性,例如下面的,将title属性指定为data.title相同的值。v-bind指令后面的属性可以是任意值
    支持完整的js表达式,在{{}}中写
    vue的指令以v-打头
    v-on用于绑定事件,例如click,submit
    v-model实现数据双向绑定
    用管道符|作为过滤器,第一个参数,作为第二个参数(过滤函数),的参数。过滤器函数放在vue的filters当中
    缩写:<a v-bind:href="url"> => <a :href="url"> <br><a v-on:click="doSomething"> => <a @click="doSomething">


<!
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 学习</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p><br> <div v-html="html"></div><br> <div v-bind:title="title">v-bind给元素绑定属性</div><br> {{1+1}}<br> {{message.split(‘‘).reverse().join(‘‘)}}<br> <div v-bind:id="html + id"></div><br> <div v-if="seen">seen的值为true,则显示该标签</div><br> <div ><a v-on:click="aclick()" href="#">点击我</a></div><br> <div ><input v-model="message"></div><br> <div >过滤器:{{ message | reverser}}</div><br> </div> <script> var data = { message: hello, vue!, html: <h1>你好!</h1>, title:div-title, id:100, seen:false } var app = new Vue({ el: #app, data: data, methods: { print_message: function(){ return this.message; }, aclick: function(){ alert(you click me!) } }, filters: { reverser: function(str){ if ( str === ‘‘) return ‘‘; return str.split(‘‘).reverse().join(‘‘) } } }); </script> </body> </html>

 

vue基本语法

标签:head   rev   set   语法   实现   ret   charset   指令   点击   

原文地址:https://www.cnblogs.com/volcanorao/p/8627620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!