框架和库的区别
- 框架：是一套完整的解决方案，对项目侵入性大，项目如果需要更换框架，则需要重新构架整个项目。
node中的express;
- 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换都弄其他库实现需求。
- 从Juery 切换到 Zepro
- 从EJS 切换到 art-template
MVC和MVVM图解
Vue 指令v-cloak,v-text,v-html
- 使用 v-cloak 能够解决 差值表达式闪烁的问题
- 默认 v-text是没有闪烁问题的
- v-text 会覆盖元素中原本的内容 ，但是 插值表达式 只会替换自己的占位符，不会把 整个元素的内容清空
- v-html会覆盖元素中原本的内容 ,他会把内容当成html内容显示
v-bind指令
- v-bind: 是 vue中提供的用于绑定属性的指令
- 注意：v-bind: 指令可以被简写成 :要绑定的属性
- v-bind 中,可以写成合法的JS 表达式
v-on指令
- v-on缩写是 @
- vue中提供了 v-on 绑定事件机制
- 浏览器中常见的事件都可以在v-on后定义
methods:{ //这个对象methods属性中定义了当前Vue实例所有可用的方法
show:function(){
alert('Hello')
}
}
跑马灯效果
// 1. 给【浪起来】按钮，添加一个点击事件 v-on @
// 2. 在按钮的事件处理函数中，协相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可;
// 3. 为了实现点击按钮，自动截取的功能，需要把 2 步骤的代码，放到一个定时器中去;
HTML代码:
<!-- 2.创建一个要控制住的区域 -->
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h4>{{msg}}</h4>
</div>
vue代码:
// 注意：在vm实例中，如果想要获取 data 上的数据，或者想调用 methods 中的方法，必须通过this. 数据属性名 或 this.方法名 来进行访问，这里的 this,就是我们 new 出来的 vm 实例
var vm = new Vue({
el: '#app',
data: {
msg: '猥琐发育，别浪~~',
IntervalId:null //在data上定义 定时器 ID
},
methods: {
lang() {
// console.log(this.msg)
// this
if(this.IntervalId != null) return;
this.IntervalId = setInterval( () => {
// 获取到头的第一个字符
var start = this.msg.substring(0, 1)
//获取到 后面的所有字符
var end = this.msg.substring(1)
// 重新拼接到新的字符串，并赋值给 this.msg
this.msg = end + start
}, 300)
// 注意： vue 实例，会监听到自己身上 data中 所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从 data上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
},
stop(){ //停止定时器
clearInterval(this.IntervalId)
// 每当清除了定时器之后，需要重新把 intervalId 置为 null
this.IntervalId=null;
}
}
});
