vue基本语法

Posted 火山

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue基本语法相关的知识,希望对你有一定的参考价值。


    使用"{{ }}"来插入文本
    使用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基本语法的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板