首页 > 其他 > 详细

vue基本语法

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

    使用"{{ }}"来插入文本
    使用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基本语法

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!