Day Day up — NO.1
- 声明式渲染 ——> 组件系统——> 客户端路由——>集中式状态管理——> 项目构建
2 Vue基本使用
使用步骤：
a. 需要提供标签用于填充数据
b. 引入Vue.js库文件
c. 可以使用vue的语法做功能了
d. 把vue提供的数据填充到标签里面
代码体验 ：
a. <div id = “app”
引入插值 <div {{msg}} </div
</div
b. <script type = “text/javascript” src = “js/vue.js”<script
<script type = “text/javascript”
var vm = new Vue ({
el : ‘#app’,
data: {
msg : ‘Hello Vue’
}
});
</script
1 . 实例化参数分析
_ el 元素的挂载位置 （值可以是css选择器或者是Dom元素）
_ data 模型数据 （值是一个对象）
- 插值表达式
_ 将数据填充到HTML标签中
_ 插值表达式支持基本的计算操作
_ Vue 代码运行及原理分析
_ 概述编译过程概念（vue语法——> 原生语法）
<> Vue模板语法
3.1 概述
1.如何理解前端渲染？
答：把数据填充到HTML标签中
模板
都可以前端渲染 —然后搞到—> 静态HTML
数据
前端渲染方式
原生js拼接字符串
使用前端模板引擎
使用vue特有的模板语
_原生js拼接字符串
基本上就是将数据字符串的方式拼接到HTML标签中，前端代码风格大体如下所示：
var date = d[i].date;
var day = d[i].info.day;
var night = d[i].info.night;
_使用前端模板引擎
script id = “abc” type=“text/html”
{{if isAdmin}}
h1{{title}}</h1
<ul
{{each list as value i }}
<li 索引 {i + 1}: {{value}} </li
_
5.模板语法概述
_ 插值表达式
_ 指令
. 事件绑定
. 属性绑定
. 样式绑定
. 分支循环结构
- 什么是指令?
. 什么是自定义属性
. 指令本质就是自定义属性
. 指令的格式 : 以v-clock开始(v-开始) - v-cloak指令用法
/ 插值表达式存在问题 :“闪动”
/ j解决问题 : 使用v-cloak指令
问题原理 : 先隐藏 , 替换好值之后再显示最终的值
官网 : https://cn.vue.js.org/va/api/
_ - 提供样式
[ v- cloak ]{
display : none;
}3,2 指令
3.数据绑定指令- v - text 填充纯文本
- .相比插值表达式更加简洁
- v-html
- .存在安全问题
- .本网站内部数据可以使用, 来自第三方数据不可以用
- v-pre 填充原始信息
- 跳过编译过程(分析编译过程)
- 数据响应式
.如何理解响应式
a. html5中的响应式(屏幕尺寸的变化导致样式变化)
b. 数据的响应式(数据的变化导致页面页面页面内容的变化)
什么是数据绑定
a. 数据绑定将数据填充到标签中- v-once 只编译一次
- a. 显示内容之后不再具有响应式功能
3.3 双向数据绑定
- 什么是双向数据绑定?
malow
malow -----> 这里的变化会导致上面的内容跟着变化 - 双向数据绑定分析
v-model指令用法 - MVVM 设计思想.
- M (model) 模型
- V (view) 视图
- VM(View - Model) 视图模型
注意两个点 ：
a. 事件监听
b. 模型绑定
3,4 事件绑定
`1. Vue 如何处理事件
- v-on 指令用法
- <input type = 'button v-on : click ='num++/>
- v-on 简写方式
- <input type = "button type = “button” @ click=‘num++’/>
2.事件函数调用方式
_ 直接绑定函数名称
<button v-on:click=‘say’ HELLO </button
-调用函数
say hi </button on
- 事件函数参数传递
- 普通参数和事件对象
- 固定button v-on : click=‘say(“hi”,$event)’> Say hi</button on
事件绑定 . 参数传递
代码体验：
var vm = new Vue({
el : ‘#app’,
data: {
num:0
},
methods:{
handle2:function(p,p1,event){
console.log(p,p1)
console.log(event.target.innerHTML)
this.num++;
},
handle1 : function(event){
console.log(event,target,innerHTML)
}
}
1, 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件 ，函数的第一个参数
- 如果事件绑定函数调用， 那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$event
_
3,4事件绑定 - 事件修饰符
stopv 阻止冒泡
<a v- on : click.stop='handle‘’>跳转</a
prevent 阻止默认行为
<a v - on : click.prevent = 'hamdle"> 跳转</a
/ 代码玩下
事件绑定 ： 事件修饰符
var vm = new Vue({
el: ‘#app’,
data: {
num:0
}
methods: {
handle0 : function(){
this.nu m++;
ent){
// 阻止冒泡
// event. stopPropagation();
}
},
handle2 : function(evnet){
// 阻止默认
// event. preventDefault();
使用修饰符时，顺序很重要， 相应的代码会以同样的顺序昌盛， 因此， 用
v - on : click.prevent.self 会阻止所有的点击 ， 而prevent只会阻止对元素自身的点击
按照文档练习， 可以连写
- 按键修饰符
玩一下 ：
var vm = new Vue({
el：’ #ap ',
data : {
uname ； ‘’,
pwd: ‘’
},
mehods:{
handleSubmit:function(){
console.log(this,uname，this. pwd)
按键修饰符
. enter 回车键
<input v-on:keyup.enter = ‘submit’delete 删除键
<inout v-on:keyup.delete =“handle”
代码走一波
事件绑定 - 按键修饰符
var vm = new Vue({
el : ‘#app’,
data : {
uname ：’’,
},
methods : {
handleSubmit: function(){
console.log(this.uname,this.pwd)
6 .自定义按键修饰符全局 config.keyCodes 对象
Vue . config.keyCodes,f1 = 112
规则： 自定义按键修饰符名字是自定义的 ， 但是对应的值必须是按键对应event
代码验证
Vue. config,keyCodes.aaa = 65
var vm = new Vue({
el: "#app’,
data: {
info ： ‘’
}，
mehods : {
handle: function(event) {
console.log(event.keyCode)
}
}
});
- 计算机案例
- var vm = new Vue( {
el : '#app',data: {a : ‘’，b : '',- result: ‘’
- },
- methods : {
- handle : function () {
- // 实现计算逻辑
- this.result = this.a+this.b
- }
- }
- }):
_
3,5 属性绑定
7. Vue 如何动态去处理属性
- v-bind 指令用法
- <a v-bind : href = ‘url’ 跳转</a
- 缩写形式
- <a href = ‘url’ 跳转 </a
2 . V-model 的底层实现原理分析
<input v-bind : value = “msg” v- on:input = “msg = Seven.target.value”
v-model指令的本质
双向数据的绑定
v-model 控制狂也会弹出
v-model v-bind可以绑定值
——
样式绑定
- class 样式处理
- 对象语法
- div v-bind : class = “{active:isActive}”</div
- 数组语法
- style 样式处理
- 对象语法
3.7 分支循坏结构
10. 分支结构
v-if
v-else
v-else -if
v - show
v- if 与 v -show 的区别
v-show 的原理
控制元素样式是否显示display：none
v - if 控制元素是否渲染到页面
- 循坏结构
v - for 遍历数组
li v-for = ‘item in list’ {{item}}</li
li v-for = 'item,index in list {{item}} + ‘—’ + {{index}} </li
key 的作用
帮助Vue 区分不同的元素 从而提高性能
li key = ‘item id ’ v - for = ‘(item , index) in list’>{{item}}+’----’{(index)}</li
基础作用
搞下思路：
12. 实现静态UI效果
- 周传统的方式实现标签的结构和样式
- 基于数据重构UI效果
14.将静态的结构和样式重构为基础Vue模块
语法的形式
- 处理事件绑定和2 js 控制逻辑
- 声明式编程
– 模板语法的结构最终现实的效果基本一致
Vue模板
Vue 实例对对象 ——》 前端功能
js控制逻辑