Vue基础知识笔记（method与computed区别以及小例子）

Vue:渐进式js框架（简单灵活轻量级没有限制，能和其他框架融合而agular却相反）

• 基础

1. //如是cdn形式，必须实例化vue对象

2.属性绑定

   El: 需要获取的元素,必须是HTML中的跟容器元素

   Data: 用于数据的存储

   methods: 用于存储方法，在页面调用(每次触发任意一个方法都会渲染所有方法)

   计算属性computed：（触发哪个渲染哪个），在页面调用时不加括号，否则出错，常用于耗时或者大量的搜索时

    method与之的区别：

method:

 

computed:

 

4.事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

 

将鼠标移入框内获取XY轴坐标，当移到固定位置就停止，移出继续

1. js中的方法

<p>鼠标移入框内获取鼠标位置</p>

<div class="canvas" @mousemove="updateXY">

{{x}},{{y}}-

<span v-on:mousemove="stopMoving">stopMoving</span>

</div>

stopMoving:function(event){

event.stopPropagation();//js中阻止冒泡的方法

}

2）直接使用vue事件修饰符stop

<p>鼠标移入框内获取鼠标位置</p>

  <div class="canvas" @mousemove="updateXY">

{{x}},{{y}}-

<span v-on:mousemove.stop="">stopMoving</span>

  </div>

 

5.键盘事件以及键值修饰符（可以组合使用）

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

 

例：

<div id="vue-app">

 <label>姓名：</label>

 <input type="text" v-on:keyup="logName"/>按一下执行一次

 <label>年龄：</label>按下回车执行一次

 <input type="text" v-on:keyup.enter="logAge" value=""/>  

</div>

 

new Vue({

el:"#vue-app",

data:{

 

},

methods:{

logName:function(event){

console.log(event)

console.log(event.key)

},

logAge:function(event){

console.log("Hello World")

},

}

})

 

6.双向数据绑定（有数据的输入还有输出 input select textarea）

ref 为获取输入的值

1）使用按键绑定事件（用ref数据）

<div id="vue-app">

<label>姓名：</label>

<input type="text" v-on:keyup="logName" ref="name"/>

<p>{{name}}</p>

<label>年龄：</label>

<input type="text" v-on:keyup="logAge" ref="age"/>

<p>{{age}}</p>

</div>

 

new Vue({

el:"#vue-app",

data:{

name:'',

age:''

},

methods:{

logName:function(event){

this.name=this.$refs.name.value;

},

logAge:function(event){

this.age=this.$refs.age.value;

},

}

})

2）使用vue提供的model事件，绑定内容为显示位置的名称即可

<div id="vue-app">

<label>姓名：</label>

<input type="text" v-model="name" />

<p>{{name}}</p>

<label>年龄：</label>

<input type="text" v-model="age" />

<p>{{age}}</p>

</div>

 

new Vue({

el:"#vue-app",

data:{

name:'',   //为数据的初始值

age:''

},

methods:{

 

}

})