vue的基础介绍

2.1 模板语法

alert 和 console.log不能用
原因：因为vue中的this指向vue的实例，所以在浏览器中无法输出 eg:{{this.msg}}
if条件改成使用三元表达式
方法一定要写在methods里面， 不要直接写在模板语法中
模板语法中支持使用匿名函数可以直接写

2.2 列表渲染

v-for指令:

html:
<ul id="example-1"> 
	<li v-for="item in items"> {{ item.message }} </li>
 </ul>
 
js:
var example1 = new Vue({
	 el: '#example-1',
	 data: {
	 	items: [ { message: 'Foo' }, { message: 'Bar' } ] 
	 } 
})

结果：
在这里插入图片描述
如果需要索引 index

v-for = "(item,index) in data "
{{ item }} --- {{ index }}

对象：

v-for = "(index,item,key) in obj"

总结:

v-for 最多可以有三个参数 (顺序不可以更改)
格式

v-for = "(index,item,key) in data"

名词解释：
index: 索引
item； data中的每一个
key；如果是对象，表示对象的key
4. v-for如果有循环嵌套，那么value可以写成一样的命名，但是建议大家写成不一样的命名，
理由：比较语义化
5. v-for 可以循环数字或是一个字符
扩展：

v-for = ' item in data'

底层：

function v-for( arg ){
//做字符串处理,设data为处理后的数据
var data = 'data'
   for( var i = 0 ; i < data.length; i++ ){
   }
}

2.3. 条件渲染

两种：

v-if 的绑定

单路分支

<p v-if = " f ">true</p>

双路分支

<p v-if = " f ">true</p>
<p v-else>false</p>

多路分支

<p v-if = " text === 'A'"> A </p>
<p v-else-if = " text === 'B'"> B </p>
<p v-else> C </p>

v-show 的绑定

<p v-show = " f ">if条件</p>

注意：v-if 和v-show的不同点

v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
性能
a.如果条件为假，v-show有较高的初始渲染开销
b.v-if 有更高的切换开销

项目中建议：
如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。

2.4. 事件处理

事件的组成：

DOM
on 添加事件的形式
事件类型 click
事件处理函数
原始的事件：

属性绑定

<div onClick = "alert"></div>
function alert(){
   alert('hello vue.js')
}

js操作
获取数据

var data = 'hello vue.js'
1
获取DOM
```javascript
var app = document.querySelector('#app')

渲染数据

app.innerHTML = data

添加事件

app.onclick = function(){
	app.style.background = 'red'
}

vue的事件：
vue使用第一种事件添加的形式 —》 v-on
格式：

v-on:eventType = eventFnName;

<button v-on:click="changeMsg">
{{ msg }}
</button>

new Vue({
   el: '#app',
   data: {
   	msg: 'hello vue.js'
   },
   methods: {
   /* 一个key 就是一个方法 */
   	changeMsg() {
   	this.msg = 'hello 我骏哥~~~'
   }
})

简写：

@eventType = eventFnName

<button @click="argHandler('hello 骏哥~~~')">
eventArgument
</button>

new Vue({
   el: '#app',
   data: {
   	msg: 'hello vue.js'
   },
   methods: {
   	/* 一个key 就是一个方法 */
   	argHandler(value) {
   	alert(value)
   }
})

事件修饰符

举例：事件冒泡(阻止事件冒泡)
e.stopPropagation()这个代码的复用性差
所以vue这边有一个解决方案：使用事件修饰符(modify)
格式：

v-on:eventType.modify = eventFnName

类型：
.stop : 阻止冒泡行为
.prevent ：阻止浏览器默认行为
.capture ：阻止捕获行为
.self ：自身触发
.once ：只执行一次
.passive ：行为结束后触发（scroll）

<!-- 阻止单击事件继续传播 -->
<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>

按键修饰符 （键盘事件 keyup keydown keypress）
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
自定义按键修饰符

全局修改
Vue.config.keyCodes.自定义修饰符 = 键盘码
使用：
@keyup.自定义修饰符 = eventFnName
自定义事件(自定义事件类型)
使用new Vue() 的到的实例来定义

vm.$on(eventName,callback)

如何触发呢？

vm.$emit(eventName)
this.$emit(eventName)

2.5.数据绑定
1.单项数据绑定：

概念；
将数据和属性进行绑定，也就是原生身上的属性的值就是数据
格式
v-bind:attr = data
简写：
:attr = data
数据更改，视图就更新

<div id="app">
  <input type="text" v-bind:value="msg">
</div>

new Vue({
  el: '#app',
  data: {
  	msg: 'hello vue.js'
  }
})

双向数据绑定
数据改变，视图更新，
视图改变，数据更新

格式：

v-model:attr=data
简写：可以省略属性
v-model=data
特别强调：
v-model用于表单， v-model默认绑定了value属性(绑定的时候value值可以省略)

<div id="app">
  <input type="text" v-model="msg">
</div>

new Vue({
  el: '#app',
  data: {
  	msg: 'hello vue.js'
  }
})

需求：使用单项数据绑定实现双向数据绑定？
注：input事件：
oninput 事件在用户输入时触发，它是在元素值发生变化时立即触发；

<div id="app">
<input type="text" v-bind:value = "msg" @input = "inputHandler">
</div>

new Vue({
   el: '#app',
   data: {
   	msg: 'hello 骏哥'
   },
   methods: {
   	inputHandler(e){
   	// console.log( e )
   	this.msg = e.target.value
   	}
   }
})

2.1 模板语法

2.2 列表渲染

2.3. 条件渲染

2.4. 事件处理

猜你喜欢