Vue基础
Posted beautyl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础相关的知识，希望对你有一定的参考价值。
Vue是前端框架，在js的基础上进行优化，对数据操作特别友好 。
导入Vue.js
1 <script src="vue.js"></script>
创建Vue对象
1 <script> 2 var vm=new Vue({ //最基础的实例Vue的方法 3 el:‘#app‘, //定位元素 4 data:{ //存储数据 5 msg:‘hi vue!‘, 6 }, 7 methods:{ //定义方法 8 // change:function () {} //定义一个方法的第一种方式，k:v的方式，匿名函数 9 change(){}, //定义方法的第二种方式，类似于python的写法，方法之间用逗号间隔 10 } 11 }) 12 </script>
模板语言
1 <div id="app"> 2 {{msg}} 3 <!-- 通过模板语言将data中的内容展示出来--> 4 </div>
1 <span>{{flag?‘男生‘:‘女生‘}}</span> 2 <!-- 模板语言中还可以进行三元运算-->
1 <span>{{num+1}}</span> 2 <!-- 模板语言中可以进行简单的加减法运算-->
绑定methods中的方法
1 <div> 2 <input type="button" value="修改" v-on:click="change"> 3 <!-- input标签绑定methods中的change方法-->,绑定事件 简写<input type="button" value="修改" @click="change"> 4 </div>
1 methods:{ //定义方法 2 // change:function () {} //定义一个方法的第一种方式，k:v的方式，匿名函数 3 change(){ //定义方法的第二种方式，类似于python的写法，方法之间用逗号间隔 4 this.msg=‘hihi!‘; //修改msg的值，使用this.msg=‘‘ 5 }, 6 }
标签中的属性值与data关联
1 <a v-bind:href="a_href">跳转</a> 2 <!-- 标签的属性值不能使用模板语言，使用v-bind-->绑定属性值 简写<a :href="a_href">跳转</a>
以上是关于Vue基础的主要内容，如果未能解决你的问题，请参考以下文章