vue是一个构建用户界面的库那个价，是一个轻量级mvvm框架，其实就是所谓的数据双向绑定
核心思想： 数据驱动+组件化的前端开发
通过简单的API实现响应式的数据绑定和组合的视图组件
-
vue实现 js代码
var vm=new Vue({
el:'#itany', //指定关联的元素
data:{ //存储数据
msg:'Hello World'
arr:[12,34,45,23,5]
}
methods:{ //存储方法
show:function(){
console.log('show方法');
},
add(){
// console.log(this); //this表示当前vue实例
// console.log(this===vm); //true
this.arr.push(666); //使用this访问当前实例中的成员
// this.show();
}
}
});
- html代码
<div id="itany">
<button v-on:click="show">点我</button>//没有参数可以省略括号
<button v-on:click="add()">向数组中添加一个元素</button>
<br>
{{arr}}
</div>
vue指令
可以使用vue指令插入到DOM节点中实现一些特殊的功能，用来扩展html标签的功能
- v-html
v-html 把data下的内容插入到DOM节点中，会进行DOM转化，也就是可以识别标签
<p v-html="url"></p> //html中
-------------------------------------------------------
url:'<a href="http://www.baidu.com">百度</a>'//data中
-
v-text
（2）把data下的内容插入到DOM节点中，只渲染内容，不可以识别标签，与html标签使用一样
-
v-on
用于绑定事件 事件类型click=’事件名字’ 事件要储存在methods里边
Methods储存事件的仓库 v-on:简写方式 @ 两者等价
<button v-on:click="txtChange">调转</button>
<button @:mouseover="addNum">+1</button>
-
v-show
控制内容的现实隐藏 传入布尔值值 指令中的引号是vue处理过的，引号中可以承载表达式，可以进行运算
body>
<div id="app">
<h2 v-show="boo">{{name}}</h2>
<button @click="boo=!boo">切换</button> <!--v-on 简写方式 @ 完全等价-->
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
name:'李白',
boo:true
}
})
</script>
-
v-if
使用方式一样，区别在于v-show是通过display实现的，v-if是每次删除后重新创建
-
v-model
数据双向绑定,和表单配合使用
view和model的双向连接，共同改变
<input type="text" v-model="name">
<h2>{{name}}</h2>
--------------------------
data:{
name:'蔡文姬',
}
-
v-for
进行数据遍历后自动渲染DOM
当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表渲染指令 v-for。
一定是写在遍历的元素上，v-for后面接等号，内容为 '申明一变量' of 'data中要遍历的一个数组'
-
for的区别
| for...in | for | forEach | for..of |
|---|---|---|---|
| 遍历对象使用，不适合遍历数组 | 循环写法繁杂 | 不能和continue break return配合使用 | 修正其他缺点 |
<body>
<div id="app">
<ul>
//一个参数表示值
<li v-for="(item) of arr">{{item}}</li>
</ul>
//两个参数：第一个表示值，第二个表示键
<div v-for="(item,index) of book">
{{index + 1}}.书名:{{item.name}}---价格：{{item.price}}
</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
arr:['HTML','CSS','javascript','node.js'],
book:[
{name:'HTML',price:18},
{name:'CSS',price:22},
{name:'Vue',price:13}
]
}
})
</script>
图片.png
-
v-once
DOM中的元素只渲染一次，不能进行变动
-
v-bind
绑定属性 绑定需要后期变动的值，如果不需要变动可以直接写行间属性
属性都可以使用v-bind 可以简写成 : 两者完全等价
<body>
<div id="app">
<!--v-bind 绑定属性 绑定需要后期变动的值，如果不需要变动可以直接写行间属性-->
<a v-bind:href="url">百度</a>
<p :title="name">Vue</p> <!--属性都可以使用v-bind 可以简写成 : 两者完全等价-->
<button @click="changeTxt">改变</button>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
url:'http://www.baidu.com',
name:'vue大法好'
},
methods:{
changeTxt(){
this.url = 'http://www.sina.com'
}
}
})
</script>
-
v-cloak 一般与display：none进行结合使用
当数据真正渲染到DOM上之后才进行显示--解决初始化慢导致页面闪动的最佳实践
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!--v-cloak 当数据真正渲染到DOM上之后才进行显示-->
<h2 v-cloak>{{name}}</h2>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
name:'vue'
}
})
</script>
-
v-pre
v-pre让DOM中数据不进行解析
绑定style
style='{key:val,key:val}' 样式的key使用 - 加上'' 变动的样式使用v-bind绑定-->
- 直接写属性
<body>
<div id="app"> <!--:style='{key:val,key:val}' 样式的key使用 - 加上'' 变动的样式使用v-bind绑定-->
<p :style="{background:bgColor,'font-size':size + 'px'}">{{name}}</p>
<button @click="changeStyle">改变样式</button>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
name:'vue',
bgColor:'blue',
size:30
},
methods:{
changeStyle(){
this.bgColor = 'red';
this.size = 20;
}
}
})
</script>
- data中的对象名
<body>
<div id="app">
<p :style="boxStyle">{{name}}</p>
<button @click="changeStyle">改变样式</button>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
name:'蔡文姬',
boxStyle:{
background:'blue',
fontSize:'30px',
color:''
}
},
methods:{
changeStyle(){
this.boxStyle.background = 'red';
this.boxStyle.fontSize = '20px';
this.boxStyle.color = 'blue';
}
}
})
</script>
- 多个样式
<body>
<div id="app">
<!--需要把多个样式属性置空时，可以使用数组的绑定方式操作样式-->
<p :style="[boxStyle,divStyle]">{{name}}</p>
<button @click="divStyle=null">修改样式</button>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
name:'蔡文姬',
boxStyle:{
background:'red',
color:'blue'
},
divStyle:{
fontSize:'30px',
color:'yellow'
}
}/*,
methods:{
changeStyle(){
this.divStyle = null;
}
}*/
})
</script>
1.什么是MVVM？
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型， 也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模 型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互， Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中， 而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑， 不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
2. mvvm和mvc区别
都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢， 影响用户体验。vue数据驱动，通过数据来显示视图层而不是节点操作。
3. vue的优点是什么
- 1. 低耦合
- 2.可重用性
- 3.独立开发
- 4.渐进式
也称块间联系。指软件系统结构中各模块间相互联系紧密程度的一种度量。 模块之间联系越紧密，其耦合性就越强，模块的独立性则越差。 就是写一个组件在任何复杂的项目任何复杂的场景下都可以即拿即用这就是低耦合视图 （View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上， 当View变化的时候Model可以不变，当Model变化的时候View也可以不变
你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
渐进式框架没有什么限制，可以在此框架上引用其他框架，不像angular1一样 想使用框架就得使用它的一套流程限制
网友评论