Vue原理和入门程序,以及简单应用

1.什么是vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

2.vue.js的三种使用方法

1）在html页面使用script引入vue.js的库即可使用。
2）使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。(大型应用推荐此方案。)
3）Vue-CLI脚手架(使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形)

3.vue.js入门程序

vue.min.js可以从我的链接下载:
https://pan.baidu.com/s/1FMMou-eMmJhuAJtlLQhyQw 提取码: 7pur

    
    
    


 

    {{name}}
 

4.vue.js的v-model双向数据绑定

4.1)v-model只能在如下元素中使用:

input
select
textarea
components（Vue中的组件）

4.2)v-model使用举例:

    
    
    



大大+
=
{{Number.parseInt(num1)+Number.parseInt(num2)}}
计算

4.3)效果图:

5.vue.js中v-text属性解决{{name}}的闪烁问题

6.vue.js中v-on的使用

v-on监听用户事件

计算
 methods:{
            change:function(){
                this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2);
            }
        }

7.vue.js中v-bind的使用

1、作用：
v‐bind可以将数据对象绑定在dom的任意属性中。
v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class
2、举例：


3、缩写形式

应用举例:

        
 
  var vm = new Vue({
        el:"#app",
        data:{
            name:"大大",
            num1:0,
            num2:0,
            result:0,
            url:"https://www.baidu.com"

        },

8.vue.js中v-if和v-for的使用

举例:

    
    
    




    
{{a}}=={{b}}
    
{{value}}=={{key}}
    

        

                {{item.user.name}}
        
        

            {{item.user.name}}