VUE
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue ({
el: "#app",
data: {
message: 'Hello Vue!'
}
})
</script>
M-V-VM
- MVVM是Model-View-ViewModel的简写。
- M-V-VM VM:ViewModel 用于连接model和view
- M-V-VM M:model 用于定于和管理数据
MVC
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
CDN
- CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
单页应用不利于优化
Object.define.Property
// 定义一个对象
const obj = {}
// 定义中间值过渡
let v = 20
// 使用Object.defineProperty来定义一个x的值
Object.defineProperty(obj, 'x', {
// 每次调用 obj.x 这个方法的时候会自动执行 return 上面定义的v
get () {
return v // 返回值
},
// 每次使用 obj.x = 某个值 这个set方法的时候就会自动执行 set方法的参数就是你的 某个值
set (newValue) {
// 把新的值赋给v 下次执行obj.x取出来的值就是新的值
v = newValue
// 每次赋值过来,就重新渲染Dom
setCountDomText()
}
})
特性检测
// 检测是否支持... 格式固定
'borderRadius` in documemnt.createElement('div').style
true
// 检测是否为触屏
'ontouchstart' in window
false
proxy
const obj = new Proxy({}, {
set (obj, prop, value) {
obj[prop] = value
},
get (obj, prop) {
return obj[prop]
}
})
插值表达式 v-text
-
vue指令都是 v-指令 这种格式,一旦使用了指令,虽然写的值看起来是字符串,因为我们使用 “值”,但是这个值已经是JavaScript,所以下面的代码实际上会报错
-
<div v-text="实际上这里已经是JavaScript,而不是普通的字符">{{msg}}</div>
-
v-html 输出正确的 不带html 标签转义的内容,就需要使用v-html指令
-
v-cloak 这个样式,只有再Vue实例化之前才有效
<style> [v-cloak] { display: none; } </style> <div id="root" v-cloak> <div>{{msg}}</div> </div> <script src="/vue.js"></script> <script> setTimeout ( () => { const app = new Vue({ el: "#root", data: { msg: 'Hello 1901' } }) },2000) </script>
-
v-for = “item in list” 用于循环渲染数据 还可以便利对象,数字
-
v-if 是直接从dom节点中把该节点移除或插入
-
v-show 是通过改变style.display来确定该节点是否显示,这种是css的显示和隐藏的操作,对于需要频繁切换显示和隐藏的节点,特别实用,比如:弹窗,手机注册和邮箱注册的两个tab的切换
-
v-on v-on:事件名 用于绑定一个事件,这个事件里可以直接操作data里的数据 v-on:事件名可以缩写成 @事件名
-
vue里的方法必须写在methods里面
-
v-bind 属性 用于动态绑定元素的属性 可以直接简写成为 :属性
-
v-text
<div id="root"> <div v-text="'这里是v-text的内容'">{{msg}}</div> // 这里是v-text的内容 <div v-text="msg"></div> // 1901 <div>{{msg}}</div> // 1901 <div>{{content}}</div> // <p>这是后台<b>富文本编辑器</b>生成的<span style="font-size: 18px;">内容</span></p> <div v-html="content"></div> // 这是后台富文本编辑器生成的内容 </div> <script src="/vue.js"></script> <script> const app = new Vue({ el: "#root", data: { msg: '1901', content: '<p>这是后台<b>富文本编辑器</b>生成的<span style="font-size: 18px;">内容</span></p>' } }) </script>
-
事件可以不加括号,接收参数为e,如果不加括号,则传递要的值过去,也可以用$event参数同时接收e参数
-
v-model 实现双向绑定
-
按键修饰符 <button @click.enter ="">
-
.stop阻止事件默认行为
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
- 按键修饰符 必须写到methods上面
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
事件修饰符 在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题, Vue.js 为 v-on
提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
事件之间可以相互调用