Vue--技术语法

vue.js源代码

* 匿名函数 (function(){}) ()

1. 特点

• 安全性高
• 减少了函数命名冲突
• 第二个括号才是函数的真正运行， 里面可以传入实际参数
• 第一个括号确定了匿名函数的作用范围， 语法不会报错， 里面放一个没有名字的函数， 函数可以接收形式参数

2. 底层代码封装

（1）* 匿名函数作用
①. 确定vue.js这个库的使用方法
* 直接将Vue当做全局的一个方法使用， 因为将Vue挂在了 window
* 使用了amd来定义vue.js这个库为一个模块， 这样我们才能模块化引入
②. 封装库如何定义
示范代码

    (
    function(){
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global = global || self, global.Vue = factory());
    }
    )(this,function(){
    'use strict'
    function Name(options){
    if(!(this instanceof Name)){
    console.log('this 有问题， Name是一个构造函数， 应该使用new 来实例化')
    }
    this._init(options)
    }
    Name.prototype._init = function(){
    console.log('name')
    }
    return Name
    })

1. 模板语法

<div id="app">
<p> num: {{ num }}</p>
<p> str: {{ str }}</p>
<p> und: {{ und }}</p>
<p> nul: {{ nul }}</p>
<p> bool: {{ bool }}</p>
<p> obj: {{ obj }}</p>
<p> arr: {{ arr }}</p>
<p> fun: {{ (function(){ return 1+1 })() }}</p>
<p> fun: {{ sum() }}</p>
<p>
if:{{ bool?num:str }}
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
num: 100,
str: '这是一个模板语法',
und: undefined,
nul: null,
bool: true,
obj: {
id: 1,
name: 'yyb',
age: 17
},
arr: [1,2,3,4],
},
methods: {
sum(){
return 1+1
}
}
})

</script>

总结

（1）. alert console.log 不能用
（2）. if条件改成使用三元表达式
（3）. 方法一定要写在methods里面， 不要直接写在模板语法中
（4）. 模板语法中支持使用匿名函数可以直接写

思考

数据可以展示了， 并且数据修改了， 视图就会更新， 那么作为一个前端， 我们知道当前确实了 DOM操作和 事件
解决：
DOM操作-----》 Vue中给了一个解决方案： 使用指令
事件 -----》 Vue中也给了解决方案： 指令

2. 列表渲染

v-for指令
v-for = " xxx in data "
{{ xxx }}
如果需要 索引 index
v-for = "(item,index) in data "
{{ item }} — {{ index }}
对象：
v-for = “(index,item,key) in obj”

代码示例：

<div id="app">
<h3> arr-item </h3>
<ul>
<li v-for = " item in arr ">
{{ item }}
</li>
</ul>
<h3> arr - index </h3>
<ul>
<li v-for = " (item,index) in arr ">
{{ item }}---{{ index }}
</li>
</ul>
<h3> obj </h3>
<ul>
<li v-for = " (index,item,key) in obj ">
{{ index }}----{{ item }} -- {{ key }}
</li>
</ul>
<h3>json</h3>
<ul>
<li v-for = "(item,index) in json">
{{ item.card }} --- {{ item.name }} --- {{ item.age }}
</li>
</ul>
<h3> 嵌套循环 </h3>
<ul>
<li v-for = "item in json">
<ul>
<li v-for = "item in item">
{{ item }}
</li>
</ul>
</li>
</ul>
<h3> 循环一个数字 </h3>
<ul>
<li v-for = " item in 10 ">
{{ item }}
</li>
</ul>
<h3> 循环一个字符 </h3>
<ul>
<li v-for = " item in 'hello' ">
{{ item }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
arr: ['a','b','c'],
obj: {
id: 1,
name: '张三',
age: 50
},
json: [
{
card: 1,
name: '李四',
age: 20
},
{
card: 2,
name: '王五',
age: 18
}
],
}
})
</script>

总结:

1. v-for 最多可以有三个参数
2. 格式
   v-for = “(index,item,key) in data”
   名词解释：
   index: 索引
   item； data中的每一个
   key； 如果是对象， 表示对象的key
3. v-for如果有循环嵌套， 那么value可以写成一样的命名， 但是我们建议大家写成不一样的命名， 理由： 比较语义化
4. v-for 可以循环 数字或是一个字符

扩展：

v-for = ' item in data'

底层：

function v-for( arg ){
//做字符串处理
var data = 'data'
for( var i = 0 ; i < data.length; i++ ){
}
}

3. 条件渲染

1. 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>

2. v-show

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

v-if 与 v-show区别

• v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
• 相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
• 一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
• 因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

4. 事件

事件基础内容：

1. 属性绑定

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

2. js操作
   // 1. 获取数据

var data = 'hello vue.js'

// 2. 获取DOM

var app = document.querySelector('#app')

// 3. 渲染数据

app.innerHTML = data

// 4. 添加事件

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

事件的组成部分：

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

总结：

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

v-on:eventType = eventFnName

简写：

@eventType = eventFnName

事件处理函数写在配置项中 methods中

书写步骤：

先写方法， 再去绑定
拓展：
如何定义一个方法， 这个方法中有两个参数， 第一个参数是自定义参数， 第二个参数是事件对象？
注意的问题：第二个参数 事件对象 = undefined
关键点： 当我们自定义参数后， 系统无法自动识别 ， 是不是事件对象
解决思路： 传入事件对象的实际参数： $event

代码示例

<body>
<div id="app">
<h3> 事件添加 </h3>
<button v-on:click = "changeMsg">
{{ msg }}
</button>
<button @click = "changeMsg">
{{ msg }}
</button>
<hr>
<h3> 事件传参 </h3>
<button @click = "argHandler('hello vue~~~')">
eventArgument
</button>
<hr>
<h3> 事件对象 </h3>
<button @click = "eventHandler">
event
</button>
<hr>
<h3> 事件多个参数 </h3>
<button @click = "evHandler('vue’,$event)">
args
</button>
</div>
</body>

<script>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
methods: {
/* 一个key 就是一个方法 */
changeMsg(){
this.msg = 'hello vue~~~'
},
argHandler(value){
alert(value)
},
eventHandler(e){
console.log(e)
},
evHandler(arg,e){
console.log(arg)
console.log(e)
}
}
})
</script>

事件的高级部分(进一步拓展)

先上代码让大家了解一下

<body>
<div id="app">
<button @click = 'destory'> 销毁 </button>
<div
@click.self = "bigHandler"
v-if = "f"
>
<p @click.stop = 'smallHandler'></p>
</div>
<!-- <input type="text" @keyup.space = "submitHandler"> -->
<input type="text" @keyup.p = "submitHandler">
<h3>自定义事件</h3>
<button @click = "myEventHandler">
my-event
</button>
</div>
</body>

<script>
Vue.config.keyCodes.P = 80
var vm = new Vue({
data: {
f:true
},
methods: {
bigHandler(e){
alert('bigger')
},
smallHandler(e){
alert('small')
// e.stopPropagation()
},
submitHandler(){
alert('keyup')
},
destory(){
this.f = !this.f
},
myEventHandler(){
this.$emit('my-event')
console.log('events')
}
}
}).$mount('#app')
vm.$on('my-event',function(){
console.log('自定义事件')
})

1. 事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符

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

v-on:eventType.modify = eventFnName

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

2. 按键修饰符 （ 键盘事件 keyup keydown keypress）

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

3. 自定义按键修饰符

1. 全局修改

Vue.config.keyCodes.自定义修饰符 = 键盘码

使用：

@keyup.自定义修饰符 = eventFnName

2. 自定义事件(自定义事件类型)
   （1）方法：
   使用new Vue() 的到的实例来定义

vm.$on(eventName,callback)

（2）如何触发

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

5. 单项 和 双向数据绑定

单项数据绑定：（数据更改 ， 视图就更新）

1. 概念；
   将数据和属性进行绑定， 也就是原生身上的属性的值就是数据
2. 格式

v-bind:attr = data

简写：

:attr = data

代码示例

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

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

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

1. 格式：

v-model:attr=data

简写：可以省略属性

v-model=data

2. 特别强调：
   v-model用于表单， v-model默认绑定了value属性

代码示例

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

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

思考：如何使用单项数据绑定实现双向数据绑定

下边是一点小提示

<body>
<div id="app">
<input type="text" v-bind:value = "msg" @input = "inputHandler">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
methods: {
inputHandler(e){
// console.log( e )
this.msg = e.target.value
}
}
})
</script>

6. class && style

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

类名绑定：
通过操作数据–》 控制 --》 类名—》 css样式

一小波总结：

1. 数据修改了， 视图就会更新， 这个现象就叫做， 数据驱动视图渲染
2. Vue是由两大内容构成

• 指令
• 组件

3. 指令
4. vue中使用v-xxx来表示一个指令， 这个指令写在 标签的属性中
5. 属性中不写 mustache语法， 内部中要写的
6. 如果 new Vue(options)如果没有el选项， 那么我们可以手动进行模板装载，
   new Vue().$mount(’#app’)