vue基础能运行的.html,Vue之模板语法

Vue

尤雨溪：Vue.js的创建者

⚫ 2014年2月，Vue.js正式发布

⚫ 2015年10月27日，正式发布1.0.0

⚫ 2016年4月27日，发布2.0的预览版本

Vue的简介

Vue:渐进式javascript框架

声明式渲染--->组件系统---->客户端路由---->集中式状态管理----->项目构建

易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效：20kB min+gzip 运行大小，超快虚拟 DOM，最省心的优化

Vue的基本使用

传统开发模式对比

Vue之Hello word细节分析

Vue的基本使用

{{msg}}

var vm = new Vue({

el: "#app",

data: {

msg: 'hello Vue'

}

})

实例参数分析

el:元素的挂载位置(CSS选择器及DOM对象)

data:模型数据(值是一个对象)

差值表达式

将Vue的数据填充到HTML标签中

支持基本的计算操作

Vue代码运行原理

Vue模板语法

前端渲染

把数据填充到HTML标签中

前端渲染的语法

使用原生JS拼接字符串

使用前端模板引擎

使用Vue模板语法

模板语法概览

插值表达式

指令

属性绑定

事件绑定

样式绑定

分支循环结构

指令

指令的本质便是自定义属性，但以V-开头(比如v-clock)

V-clock

插值表达式存在的问题：’闪动‘,使用v-clock可解决闪动问题

原理：先设置样式进行隐藏，数据中把值替换完毕之后，再进行值的显示

v-clock

/* 设置样式进行隐藏 */

[v-v-clock] {

display: none;

}

{{msg}}

let vm = new Vue({

el: "#app",

data: {

msg: "hello Vue"

}

})

Vue数据绑定的三种方式

v-text:填充纯文本 相当于插值表达式而言且没有闪动的问题

v-html:填充HTML片段 存在安全问题

v-pre:显示原始信息 跳过编译过程

Document

{{msg}}

{{pre}}

let vm = new Vue({

el: "#app",

data: {

msg: "hello Vue",

text: "v-text",

html: '

v-html

',

pre: "v-pre"

}

})

数据响应式

html5中的响应式：屏幕尺寸的变化会导致样式的变化

数据的响应式：数据的变化会导致样式的变化。

数据绑定：把数据填充到HTML标签中

V-once

v-once:只编译一次 显示内容之后便不再具有响应式的功能

v-once的优点：使用v-once之后，Vue便不再进行事件监听，从而可能节省性能

V-once

{{msg}}

let vm = new Vue({

el:"#app",

data:{

msg:"v-once"

}

})

双向数据绑定

v-model

双向数据绑定：表单的内容发生变化时，从而会导致数据的变化，而数据的变化会影响页面的变化

v-model

{{msg}}

let vm = new Vue({

el:"#app",

data:{

msg:"hello Vue"

}

})

MVVM

M(model)

V(view)

VM(View-model)：实现逻辑功能

Vue之事件

Vue之处理事件

Vue之处理事件

#app {

width: 800px;

margin: 200px auto;

}

{{num}}

let vm = new Vue({

el:"#app",

data:{

num:'0'

}

})

Vue之事件函数的调用

methods:Vue实例中定义方法

Vue之事件函数的调用

{{num}}

let vm = new Vue({

el:"#app",

data:{

num:'0'

},

methods:{

handle:function () {

this.num++

},

handle2:function () {

this.num--

}

}

})

Vue之事件函数的传递参数

如果直接绑定事件函数的名，默认第一个参数则为事件对象

如果直接调用事件函数，默认最后一个参数为事件对象，事件对象的固定写法为$event

Vue之事件函数的传递参数

{{num}}

let vm = new Vue({

el:'#app',

data:{

num:'0',

},

methods:{

handle1:function (event) {

this.num++

console.log(event)

console.log(event.target.value)

},

handle2:function (n1,n2,event) {

console.log(n1+n2);

console.log(event.target.value)

}

}

})

Vue之事件修饰符

所谓的事件修饰符，是用来阻止事件的默认行为。

程序员灯塔

转载请注明原文链接：Vue之模板语法