框架和库
- 框架
框架是有一套自己的生态系统，是为解决一个(一类)问题而开发的产品。框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。例如 Vue - 库
库是没有自己的生态系统的， 它就是一个工具， 是将代码集合成的一个产品，供程序员调用。例如：jQuery、react
Vue的介绍
- vue的简介
- 使用script标签引入Vue.js
- 实例化全局暴露的变量Vue构造器函数得到一个实例
- 配置Vue构造器函数中的配置项，一个配置项一个功能
- el – 将id为app的一部分DOM结构当做模板传入配置项，然后挂载在页面中,相当于js中取元素的操作document.querySelector/All()，以及jQuery中的$()，用来选取元素
- data – 用来定义数据的，数据的类型支持各种js数据格式
- methods – 方法
- computed – 计算
- watch – 侦听
- 等等
- 将数据展示在视图中，通过使用 双大括号语法 （ mustache 语法 ） 来展示数据
$<p> 数据: {{data }} </p> - 这时候我们发现在我们的模板（DOM结构）中可以使用 javascript语法，那么我们把这个类型称之为 ‘jsx语法糖’
- 数据修改后发现，视图就会更新，这种情况称之为–数据驱动（视图）
- Vue架构模式
- 目前我们市面上基本上是以 MVC 这个架构思维 为主 Vue使用 MVC 的衍生的模式，这个模式叫做 MVVM
- 常见架构模式
- MVC
- Backbone.js
- MVP
- MVVM
- M Model 表示数据
- V View 表示视图
- P/C/VM Presenter/Controller/ViewModel(视图模型) 表示就是逻辑
- vue双向数据绑定
- Vue使用的是MVVM
- Vue中 VM改变，那么 V也会改变 ， 反之也是一样的， 我们称之为 '双向数据绑定'
- vue数据驱动/ 双向数据绑定的原理 / 深入响应式的原理
- vue是通过数据劫持和事件的发布订阅来进行数据驱动的，当我们在data选项中定义数据后，vue会通过observer（观察者）监听data选项，将data选项中的所有key通过es5的Object.definedPropty进行getter和setter设置，当数据绑定在DOM上时，就会触发getter,给DOM设置初始值，当我们在V(视图中)输入内容时，就会触发setter,就可以获得最新的值，通过watch（监听）通知Vue进行V(视图)重新渲染。
<body> <input type="text"> <div class="box"></div> </body> <script> /* - 数据驱动/ 双向数据绑定的原理 / 深入响应式的原理 V -> VM VM -> V 这个是使用了es5中的一个特性，这个特性叫做 Object.definedPropty( obj, 对象的属性， 配置项) Object.definedPropty 配置项： 1. 属性是否可写 2. 属性是否可以遍历 3. 存储器 get 函数 和 set 函数 也称之为 getter && setter 数据 驱动只和存储器有关系 */ var box = document.querySelector('.box') var input = document.querySelector('input') var obj = { a: ' hello vue ' } Object.defineProperty( obj , 'a' , { get () { return 'hi vue ' //设置当前属性的初始值 }, set ( value ) { console.log( value ) box.innerHTML = value console.log( obj ) } }) input.onchange = function () { obj.a = input.value return ; } box.innerHTML = obj.a </script>vue中通过 v-model 来进行双向数据绑定 v-model只用于表单元素 v-model默认绑定 value属性<body> <div id="app"> <h3> VM 变 V 跟着变 </h3> <p> {{ msg }} </p> <h3> V变 Vm也跟着变 </h3> <input type="text" v-model = "msg"> </div> </body> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello Vue.js ' } }) </script> - Vue调试
注意：在开发模式中请下载vue的开发版本，因为开发版本会有错误提示，另外想要更好的调试vue可以在google商城里面安装Vue Devtools
Vue指令
-
格式：
v-xxx = “mustache语法”
v-xxx = “msg”
v-xxx = “{{msg}}” 错误用法 -
v-html 将一个数据展示在一个DOM内容中，相当于js中的innerHTML( html属性 )
- 这种形式可以防止脚本攻击 xss CSRF
- v-bind 单项数据绑定
- 使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind
- 格式： v-bind:DOMattr = “data”
- 简写： :DOMattr = “data”
-
v-text 非转义输出 不会转义便签 v-html会转义数据里的标签
-
class vs style 添加类名和添加样式
.box_size{ width: 100px;height: 100px; } .box_color{ background: red; color: white; margin: 10px; } -
class
- object 对象的形式
<div :class = "{[size]:true,[color]: true,[box]: true}"></div> <div :class = "{[size]: 5>2?true:false,[color]: true,[box]: true}"></div> - arr 数组的形式
<div :class = "[size,box,color]"></div> <div :class = "[class_flag?size:'',box,color]"></div>new Vue({ el: '#app', data: { msg: 'hello vue.js', size: 'box_size', color: 'box_color', box: 'box', class_flag: true } }) - 推荐使用arr形式
- object 对象的形式
-
style
<body>
<div id="app">
<h3> 样式 </h3>
<div class="box" style="width: 100px;height: 100px;background: red"></div>
<h3> vue-style-对象形式 </h3>
<div :style = "{width:'100px',height: '100px',background: 'blue'}"></div>
<div :style = "style"></div>
<hr>
<h3> vue-style-数组形式 </h3>
<div :style = "[style,border]"></div>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
style: {
width: '100px',
height: '100px',
background: 'yellow'
},
border: {
border: '1px solid black'
}
}
})
</script>
- 推荐使用arr形式，更方便
- 条件渲染 v-if && v-show
条件渲染有两个指令， 一个是 v-if , 另外一个是 v-show
-
v-if 有三种使用形式
- 单路分支
- 双路分支
- 多路分支
<body> <div id="app"> <h3> v-if 单路</h3> <p v-if = "flag"> 单路分支 </p> <h3> v-if 双路 </h3> <p v-if = "flag"> 双路1 </p> <p v-else> 双路2 </p> <h3> v-if 多路 </h3> <p v-if = "type === 'A' "> A </p> <p v-else-if = " type === 'B'"> B </p> <p v-else> C </p> </div> </body> <script> /* 1. v-if 如果值为false，那么绑定的DOM就会被销毁 2. v-if 操作的是一个DOM的生成和销毁 3. 如果v-if的初始值时false,那么这个DOM元素是不会渲染的 */ new Vue({ el: '#app', data: { msg: 'hello vue.js', flag: false, type: 'A' } }) </script>1. v-if 如果值为false，那么绑定的DOM就会被销毁 2. v-if 操作的是一个DOM的生成和销毁 3. 如果v-if的初始值时false,那么这个DOM元素是不会渲染的 -
v-show
<body> <div id="app"> <h3> v-show </h3> <p v-show = "flag"> hello vue.js </p> <template v-if = 'flag'> <div class="box" > <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </template> </div> <template> 123 </template> </body> <script> /* 1. v-show 操作的是一个DOM的dispay样式属性 2. 如果v-show的初始值是false,那么这个绑定的DOM元素是否会渲染呢？ v-show不管值是什么，它都会渲染出来 */ new Vue({ el: '#app', data: { msg: 'hello vue.js', flag: false } }) </script>1. v-show 操作的是一个DOM的dispay样式属性 2. 如果v-show的初始值是false,v-show不管值是什么,都会渲染出来。 -
v-if vs v-show
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 -
template
template标签如果放在模板的范围内使用，那么将来不会被解析渲染
上例中template在#app之内就不会被浏览器解析渲染，如果在模板范围之外，浏览器会按照便签的形式进行解析渲染
- 列表渲染
v-for 是用来做列表渲染的 (相当于for循环)- 格式
v-for = " xxx in(of) data "
举例：
v-for = " item in(of) todos " - 带参数的格式
v-for = " (item,index) in todos "
<body> <div id="app"> <h3> num </h3> <ul> <li v-for=" n in num "> {{ n }} </li> </ul> <hr> <h3> string </h3> <ul> <li v-for=" s of str"> {{ s }} </li> </ul> <hr> <h3> arr </h3> <ul> <li v-for=" item in arr "> {{ item }} </li> </ul> <h3> arr - v-for 带参数的 </h3> <ul> <li v-for="( item , index) in arr "> <p> item -- {{ item }} </p> <p> index ---{{ index }} </p> </li> </ul> <hr> <h3> object </h3> <ul> <li v-for=" item in obj "> {{ item }} </li> </ul> <h3> object-v-for 带参数 </h3> <ul> <li v-for=" (item,key) in obj "> <p> item -- {{ item }} </p> <p> key -- {{ key }} </p> </li> </ul> <h3> object-v-for 带三个参数 </h3> <ul> <li v-for=" (item,key,index) in obj "> <p> item -- {{ item }} </p> <p> key -- {{ key }} </p> <p> index -- {{ index }} </p> </li> </ul> <hr> <h3> json </h3> <button v-on:click="add"> 添加 </button> <button v-on:click="notChange"> 不能检测的 </button> <button v-on:click="clear"> 清空一个数组 </button> <ul> <li v-for="item in json"> //for循环的嵌套 <ul> <li v-for="(ele,index) in item" :key="index"> {{ ele }} </li> </ul> </li> </ul> <hr> <h3> 新数组 computed - filter </h3> <ul> <li v-for=" item in newJson" :key="item.id"> {{ item.text }} </li> </ul> </div> </body> <script> new Vue({ el: '#app', data: { msg: 'hello vue.js', num: 10, str: 'hi vue.js', arr: [1, 2, 3, 4], obj: { id: 1, name: 'wtf', age: 18 }, json: [ 'text',{ id: 1, text: '事件1' }, { id: 2, text: '事件2' } ] }, methods: { //这里面存放的都是事件的处理程序 add() { this.json.push({ id: 3, text: '事件3' }) }, notChange() { // this.json[0] = '事件4' //这样写点击按钮虽然改变了json,但是原来根据为未改变之前json数据渲染出的视图是不会更新改变的 //在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 //受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。（引用） //所以用到下面这个新属性 Vue-给对象新增属性（使用Vue.$set()）改变json即可改变视图 //代替 Object.assign() // Vue.set(this.json,0,'事件4') this.$set(this.json, 0, '事件4') }, clear() { // this.json.length = 0 删除json里的所有数据 this.json.splice(0, this.json.length) } }, computed: { // 计算属性 // 这里存放的也是方法，但是这个方法是有返回值的，并且方法名还可以当做一个变量（相当于直接在data里面定义的数据）来使用 newJson() { return this.json.filter(item => { return item.id > 1 }) } } }) </script> - 格式
扫一扫
6735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
