vue快速入门

一、概念

vue，是构建用户界面的渐进式框架，采用自底向上增量开发设计。
vue,只关注图层，他的设计目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

二、基础语法结构

css代码：

<div id="app">    {{msg}}</div>

js代码：

new Vue({    "el":"#app",    data:{    "msg":"Vue语法结构"    }})

三、常见指令

v-text 进行文本的数据绑定—相当于ng-bind
v-html 进行脚本数据绑定，有安全问题（xss攻击问题）
v-bind：属性 进行属性的数据绑定
v-if 根据表达式的值（true/fasle)判断是否渲染元素
v-else-if 不需要表达式，前一兄弟元素必须有v-if或v-else-if
v-else 不需要表达式，前一兄弟元素必须有v-if或v-else-if
v-for 用于循环数据输出—相当于ng-repeat；在vue1.x版本里$index存在，在vue2.x版本里$index被取消了
v-show/v-hide 根据表达式的值（true/fasle)决定元素的显示/隐藏
v-pre 它里面包含的元素vue不编译，直接显示
v-cloak 可以隐藏未编译的Mustache语法，直到编译结束
v-once 只渲染元素或组件一次
v-on 事件绑定–相当于jquery中的on

下面我们就详细的说说v-on的用法：

3.1、无参用法

html代码

<div id="app">    <button v-on:click="fun()">        点击一下    </button></div>

js代码

new Vue({        el:"#app",        data:{        },        "methods":{            fun:function(){                alert("我点了")            }        }    })

3.2、有参用法

html代码

<div id="app">    <button v-on:click="fun('那就点呗')">        点击一下    </button></div>

js代码

new Vue({            el:"#app",            data:{            },            "methods":{                fun:function(a){                    alert("我点了")                    alert(a)                }            }        })