# Vue.js 基础用法

Vue.js 基础用法

入门案例

• <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 使用vue需要先引包

<div id="app">
    {
  {message}}
    {
  { number + 1 }}  
    {
  { ok ? 'YES' : 'NO' }}
</div>
new Vue({
    // 可以直接运算和三元运算,注意不能使用if
    el:'#app',
    data:{
        message:'hello world', //注意不要写分号结尾
        number:100
    }
});

v-on 指令[简写 @]

• 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

v-on:click

<div id="app">
    {
  {message}}
<button v-on:click="fun1('good')">点击改变</button>
</div>
new Vue({
    el:'#app',
    data:{
        message:'hello world'
    },
    methods:{
        fun1:function(msg){
        this.message=msg;
        }
    }
});

v-on:keyup

<div id="app">
    <input type="text" v-on:keydown="fun1($event)">
    <input type="text" @keydown.p.prevent="fun2" />
</div>
new Vue({
    el:'#app',
    methods:{
        fun1:function(event){
			var keyCode=event.keyCode;
			if(keyCode<48 || keyCode>57){
				event.preventDefault();// 不操作,也不会在input显示
			}
		},
		fu