Vue框架入门

VueJS介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。详细介绍请查看官网。
官网地址:https://cn.vuejs.org/

首先引入vue.js文件

Snipaste_2019-07-11_21-06-35.png

Vue插值表达式

    
        
        
               
    
    
        
        

            {{user.name}}
            {{msg}}
        
  
        
        

            {{user.name}}
            {{msg}}
        
  
    
    

Vue的click事件

Vue按键事件

鼠标悬停事件

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop ：事件不冒泡，及不触发父容器事件。
.prevent：取消默认点击事件，如跳转事件
.once:只能点击一次

    
        
        
        
        
    
    
        

            
            跳转到淘宝
            
            跳转到百度
        
    
    

vue的v-text和v-html绑定

vue的v-bind属性绑定

    
        
        
        
        
    
    
        

            
                
{{product.pname}}
                
就是这个颜色
            
                

                
                
{{product.pname}}
                
就是这个颜色
        
    
    

vue的v-model数据双向绑定

    
        
        
        
        
    
    
        

            用户名:

            密码:

            
        
    
    

vue的v-for循环

    
        
        
        
        
    
    
        

            

                

                    
名字
                    
年龄
                    
密码 
                
                

                    

                        
{{user.username}}
                        
{{user.age}}
                        
{{user.password}}
                    
                
            
            

                

                    {{u.username}}
                
            
            

                {{pvalue}}----{{pname}}
            
        
    
    

v-if与v-show

v-if是根据表达式的值来决定是否渲染元素（当值为false时元素根本不会创建）。
v-show是根据表达式的值来切换元素的display css属性（当值为false时，元素只是单纯的隐藏，元素还是存在的）。

    
        
        
        
        
    
    
        

            
{{user1.username}}
            
{{user1.username}}
            
        
    
    

VueJS生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。

    
        
        
        
    
    
        
  
            {{message}}
        
        
        
    

VueJS ajax

vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。
vue-resource的github: https://github.com/pagekit/vue-resource

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
axios的github:https://github.com/axios/axios

引入axios

首先就是引入axios,如果你使用es6，只需要安装axios模块之后
import axios from 'axios';
//安装方法 npm install axios
//或bower install axios
当然也可以用script引入

为什么推荐用axios

其实他本质和jquery的ajax请求是相同的，都是回调函数，服务端不响应，就不会往下执行，但是它提供了语法糖，让开发者用的舒服些。

使用案列

    
        
        
        
        
    
    
        

            {{msg}}
        
        
    

上面代码用拉姆达表达式写法（推荐）

    
        
        
        
        
    
    
        

            {{msg}}