Vue新手入门教程——helloworld(表达式，指令)

Vue：渐进式JavaScript框架

如何安装使用？？    -->官网下载vue.js然后在自己的项目中引入 https://cn.vuejs.org/v2/guide/installation.html

Vue入门_helloworld：

    
    
    



{{name}}

效果图：

温馨小提示：在这里我是用idea建的web项目，测试中发现html文件只有写在web下才有效，如果你们写的时候发现无效，建议将html文件移动到web下进行测试~

---

el:挂载到指定名称的html标签上

data:绑定的数据  -->相当于给html中使用的时候所传的值

methods：绑定的方法  [注意：其中this代表Vue对象]     

methods:{

    方法名:function(){  //代码...  }
}

双向绑定： --> 通过指令 v-model    --即修改一方同时修改相同的另一方，达到数据同时更新

案例：

    
    
    




    
    {{person}} 

    {{person.age}} 

    {{sex}}
    

    {{sayName()}}
    {{whatColor('pink')}}
    

    
    

效果图：

---

VueJS表达式

Vue指令：  

v-text=“表达式”             设置标签中的文本
v-html                           设置标签中的html
v-if                                判断条件
v-for                              循环
v-bind:                          绑定属性或对象
v-show:                         判断表达式的值,true则显示,false则隐藏
v-model                        数据双向绑定
v-on                              注册事件

v-bind   简写  :         ex:  v-bind:src  简写之后是  :src

v-show

v-if

v-on

v-model