vue2.0学习笔记
part 1
1、什么是vue
构建用户界面--框架
构建用户界面:用vue往html页面中填充数据
框架:是一套现成的解决方案,只能遵守框架规范,编写业务
2、vue的两个特性
1、数据驱动视图
数据的变化会驱动视图自动更新
好处:程序员只管把数据维护好,页面结构会被vue自动渲染出来
2、双向数据绑定
js数据的变化,会自动渲染到页面上
页面上表单采集的数据发生变化时,会被vue自动获取到,并更新到js数据中
3、MVVM
MVVM是vue实现数据驱动视图和双向数据绑定的核心原理
MVVM指的是Model 、 View 和 ViewModel
Model:表示当前页面渲染时所依赖的数据源
View:表示当前页面所渲染的DOM结构
VIewMosel:表示vue实例,是MVVM的核心。是它把当前页面的数据原和页面结构连接在一起
4、vue的基本使用
- 导入vue.js的script脚本文件
- 在页面中声明一个将要被vue所控制的DOM区域
- 创建VM实例对象(vue实例对象)
<body>
<!-- 希望vue能够控制下面的这个div,帮我们把数据填充到div内部 -->
<div class="app">{{username}}</div>
<!-- 1、导入vue的库文件,在window全局就有了vue这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2、创建vue实例对象 -->
<script>
// 创建vue实例对象
const vm = new Vue({
// el属性是固定写法,表示当前实例要控制页面上的哪个区域,接受值是一个选择器
el:"#app",
// data对象就是要渲染到页面上的数据
data:{
username:"zhangsanfeng"
}
})
</script>
</body>
5、vue的指令与过滤器
指令:是指vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构
vue中的指令按照不同的用途可以分为六大类:
1. 内容渲染指令:
用来辅助开发者渲染DOM元素的文本内容,常用指令有
// v-text: 会覆盖原有内容
<p v-text="username">姓名</p> //姓名会被username覆盖
// {{}}:叫插值表达式,实际开发中用的最多,只是内容占位符,不会覆盖原有内容
<div class="app">姓名:{{username}}</div> //姓名:username内容
// v-html:包含html标签字符串渲染为页面的html元素需要用到
info:"<h5 style='color:red;'>我是h5标签</h5>" //vue的使用中data增加一个info属性
<div class="app">
<p v-html="info"></p>
</div>
2. 属性绑定指令:
为元素属性动态绑定值 v-bind 可简写为 :
<div class="app">
<!-- data中新增属性tips:"请输入用户名"-->
<input type="text" v-bind:placeholder="tips">
<!-- v-bind: 可简写为: -->
<!-- data中新增属性photo:"https://www.zcool.com.cn/work/ZNjQ0MDA4Mjg=.html"-->
<img :src="photo" alt="">
</div>
3. 事件绑定指令:
为元素绑定事件 v-on 可简写为 @
<div class="app">
<p>count的值为:{{count}}</p>
<!-- <button v-on:click="add(1)"> +1</button> -->
<button @click="add(1)"> +1 </button>
</div>
<!-- 1、导入vue的库文件,在window全局就有了vue这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2、创建vue实例对象 -->
<script>
// 创建vue实例对象
const vm = new Vue({
// el属性是固定写法,表示当前实例要控制页面上的哪个区域,接受值是一个选择器
el:"#app",
// data对象就是要渲染到页面上的数据
data:{
count:0
},
//methods 用来存放方法
methods:{
add(n){
//this === vm
this.count += 1
}
}
})
</script>
4. 双向绑定指令:
快速获取表单数据 v-model 适用于input输入框,textarea,select等
<div class="app">
<input type="text" v-modle="username">
<select v-modle="city">
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
username:"张无忌",
city:''
},
})
</script>
5. 条件渲染指令:
控制元素的显示与隐藏 v-if \ v-show
v-if:动态为元素添加或移除display:none样式(适合需要频繁显示与隐藏)
v-show:动态创建或移除元素(适合创建或移除后不需要再重复操作)
<div class="app">
<p v-if="flag">这是被v-if控制的元素</p>
<p v-show="flag">这是被v-show控制的元素</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
//如果flag为true,则显示被控制的元素,如果为false则隐藏被控制的元素
flag:true
},
})
</script>
6. 列表渲染指令:
基于一个数组来循环渲染一个列表结构 v-for 需要使用item in items形式的特殊语法
v-for : 需要使用item in items形式的特殊语法 ,其中items是待循环的数组,item是被循环的每一项
官方规定:使用v-for,一定要绑定一个key的值,最好为id,key的值只能为数字或字符,具有唯一性
<div class="app">
<table>
<thead>
<th>索引</th>
<th>id</th>
<th>姓名</th>
</thead>
<tbody>
<!-- <tr v-for="item in list"> 如果需要索引号,item可以换为(item , index)-->
<tr v-for="(item , index) in list" :key="item.id">
<td >0</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
list:[
{id:1 , name:"张三"},
{id:2 , name:"李四"},
{id:3 , name:"王五"},
]
},
})
</script>
---------------------如有错误或者补充,欢迎各位前辈给予批评指出-------------------