Vue基础

1 <script src="vue.js"></script>

 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 <!--    模板语言中可以进行简单的加减法运算-->

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         }

1     <a v-bind:href="a_href">跳转</a>
2 <!--    标签的属性值不能使用模板语言，使用v-bind-->绑定属性值  简写<a :href="a_href">跳转</a>