十四周学习前端的Vue.js框架的笔记记录，以及遇到的问题记录。什么是Vue.js?
Vue.js Day1
前五天：学习vue基本语法和概念，打包工具 Webpack,Gulp
后五天：以项目驱动教学。
1.什么是Vue.js?
①Vue.js是目前最火的前端框架
②React是最流行的前端框架
（均可以进行手机app的开发，vue的手机app开发，需要借助Week）。
③Angular.js、React.js、Vue.js，三大主流前端框架。
④vue.js是一套构建用户界面的框架，只关注视图层。容易上手，便于和第三方库或者既有的项目整合。
⑤前端的主要工作？主要负责MVC的V层，主要工作是和界面打交道，制作前端页面效果。
2.为什么要学习流行框架？
☆企业为了提高开发效率，在企业中，时间就是效率，效率就是金钱。
企业中，使用框架，可以提高开发效率。
☆提高开发效率的历程：原生jsàjquery之类的类库à前端模板引擎àAngular.js/vue.js（帮助我们减少不必要的dom操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，前端程序员不用再操作dom,解放用户的双手，让程序员有更多的时间去关注业务逻辑】）。
☆增加就业时的竞争力。
人无我有，人有我优。
你平时不忙的时候，都在干嘛？（逛社区，买前端相关的书本等学习能力提升。）
3.框架和库的区别？
框架：提供了一整套完整的解决方案，对项目的侵入性较大，如果需要更换框架，则需要重新构架整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库。
--1.从jquery切换到zepto
--2.从ejs切换到art-template.
4.Node(后端)中MVC与前端中的MVVM之间的区别？
+MVC是后端
+MVVM：是前端视图层的分层开发思想，主要把每个页面分成了M（传数据）、V（页面）和VM（中间调度）,VM是MVVM思想的核心；因为VM是M和V之间的调度者。
（VM）提供了数据的双向绑定。
- 如何定义基本的vue代码结构
- 插值表达式和v-text
- V-cloak
- V-html
- V-bind：属性绑定机制，缩写是 ：
- V-on:事件绑定机制，缩写是@
实例1：走马灯效果
一、事件修饰符：
<!-- .stop阻止冒泡事件 -->
<!-- .prevent阻止默认行为 -->
<!-- .capture 实现捕获触发事件的机制 -->
<!-- .self实现只有点击当前元素的时候，才会触发事件处理函数 -->
<!-- .once只触发一次 -->
二、v-bind只能实现单向绑定，从M自动绑定到V,无法实现数据的双向绑定。
v-model来实现双向绑定。
三、Vue通过属性绑定为元素设置class类样式
①直接传递一个数组，注意，这里的class需要使用v-bind做数据绑定。
.thin {
Front-weight:200;
}
<h1 :class=”[‘thin’,’itatic’,flag?’active’:’’]”>这是一个h1</h1>
<script>
Var vm=new Vue({
el:’#app’;
data:{
flag:false，
classObj:{red:true,thin:true,italic:false,active:false},
styleObj1:{color:’red’,’font-size’:’40px’,’font-weight’:’200’},
styleObj2:{fontstyle:’italic’},
Methods:{}
});
②用数组中嵌套对象，来代替三元表达式，提高代码可读性。
<h1 :class=”[‘thin’,’italic’,{‘active’:flag}]”>这是一个h1<h1>
③在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，这边没加；属性的值，是一个标识符。
<h1 :class=”{red:true,thin:true,italic:false,active:false}”>这是一个h1</h1>
④<h1 :class=”classObj”>这是一个H1</h1>
四、绑定Vue中的样式style内联样式
①直接通过v-bind，对象是无序键值对的集合，属性中有“-”，需要加单引号。
<h1 :style=”{color:’red’,’font-weight’:’200’}”>这是h1</h1>
②<h1 :style=”styleObj”>这是h1</h1>
③<h1 :style=”[styleObj1,styleObj2]”>这是h1</h1>
五、v-for指令的四种使用方式。
1.迭代数组
循环普通数组
<script>
var vm =new Vue({
el:”#app”,
data:{list:[1,2,3,4,5]},
});
</sctipt>
<div id=”app”>
<p v-for=”item in list”>{{item}}</p>
<p v-for=”(item,i) in list”>---索引值：{{i}}----每一项：{{item}}</p>
</div>
循环对象数组
data:{
list:[{
{id:1,name:’zs1’},
{id:2,name:’zs2’},
{id:3,name:’zs3’}
}]
}
<p v-for=”(user,i) in list”>Id:{{user.id}}---姓名：{{user.name}}---索引：{{i}}</p>
循环对象
data:{
user:{
id:1,
name:’wp’,
gender:’女’
}
}
☆注意：在遍历对象的时候，除了val，key键值之外，还有第三个位置I,是索引值。
<p v-for=”(val,key，i) in user”>{值是：{val}}---键是：{{key}}---索引：{{i}}</p>
跌代数字：
in 后面我们放过 普通数组、对象数组、对象，还可以放数字。
☆注意：如果使用v-for迭代数组时，是从1开始。
<p v-for=”count in 10”>这是第{{count}}次循环</p>
五、在v-for中key的使用注意事项。
在组件中使用key是必须的。Day1-19☆
六、v-if和v-show的区别，
v-if每次都会重新删除或创建元素,有较高的切换性能消耗。
v-show每次不会删除和创建，而是用display:none和display:block;有较高的初始渲染消耗。
如果元素涉及到频繁的切换，最好不要用v-if。
如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if.
Day1总结:
- MVC和MVVM的区别，MVC是后台，MVVM只考虑前端，VM双向数据绑定。
- 学习了vue中最基本的代码结构。
- 基本指令的学习。插值表达式 v-cloak/v-text/v-html/v-bind(:)/v-on(@)/v-model/v-for/v-if/v-show
- 时间修饰符：.stop/.prevent/.once/.capture/.self
- el:指定要控制的区域；data:指定区域内要用到的数据；methods：虽然带有s后缀，但是是一个对象，这里面可以自定义方法。
- 在VM实例中，如果要访问data上的数据，或者要访问methods中的方法，必须带this
- 在v-for中要会使用key属性（只接受string/number）
- V-model只能应用于表单元素。
- 在Vue中绑定样式的来年各种方式v-bind:class v-bind:style。
Vue.js Day-2
1.过滤器：只能在两个地方使用,mustachc插值和
2.品牌案例实训：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="lib/bootstrap.css">
<title>品牌列表</title>
</head>
<body>
<div id="app">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">添加品牌</div>
<div class="panel-body form-inline ">
<label for="">Id:
<input type="text" class="form-control" v-model="id">
</label>
<label for="">Name:
<input type="text" class="form-control" v-model="name">
</label>
<!-- 在Vue中使用事件绑定机制，为云阿苏指定处理函数的时候，如果加了小括号，就可以给函数传参 -->
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label for="">搜索名称关键字：
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- <tr v-for="item in list" :key=item.id> -->
<tr v-for="item in search(keywords)" :key=item.id>
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{ item.ctime | dateFormat() }}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.filter('dateFormat',function (dateStr,pattern="") {
//根据给定的时间字符串，得到特定的时间
var dt=new Date(dateStr)
//yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth()+1
var d = dt.getDate()
if(pattern.toLowerCase()==='yyyy-mm-dd'){
return `${y}-${m}-${d}`
}else {
var hh=dt.getHours()
var mm=dt.getMinutes()
var ss=dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
var vm= new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()}
]
},
methods:{
add() {
//console.log();
//分析：1.获取id和name,直接关联data上面获取
//2.组织出一个对象
//3.把这个对象，调用 数组的相关方法，添加到 当前data的list中
//4.注意：在Vue中，已经实现了数据的双向绑定，当我们修改了data中的数据，vue会默认监听到数据的改动，自动把最新的数据，应用到页面上
var car ={id:this.id,name:this.name,ctime:new Date() };
this.list.push(car);
this.id=this.name='';
},
del(id) {//根据id删除数据
//分析：1.如何根据id，找到要删除对象的索引
//2.如果找到索引了，直接调用数组的splice方法
//方法1.
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1);
// //在数组的some方法中，如果return true 后立即终止这个数组的后续循环
// return true;
// }
// });
//方法2.快速找到索引的方法
var index=this.list.findIndex(item=>{
if(item.id==id){
return true;
}
})
console.log(index);
this.list.splice(index,1);
},
search(keywords){
//方法1
// var newList=[]
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords)!=-1){
// newList.push(item);
// }
// })
// return newList
//方法2.forEach some filter findIndex 这些都是数组的新方法
return newList=this.list.filter(item=>{
if(item.name.includes(keywords)){
return item
}
})
}
}
});
// 过滤器定义语法
// Vue.filter('过滤器名称'，function(){})
//过滤器中的function，第一个参数，已经被规定死，
</script>
</body>
</html>
<!-- 过滤器调用时候的格式 {{ name | nameope }} -->
运行截图：
- 十六周学习前端的Vue.js框架的笔记记录，以及遇到的问题记录
- 十五周学习前端的Vue.js框架的笔记记录，以及遇到的问题记录。
- 学习django框架，记录所遇到的问题以及解决方法
- vue.js学习笔记--遇到的那些问题
- vue.js学习笔记--遇到的那些问题
- vue.js中的各种问题记录（包括环境问题和学习笔记）
- 我前端学习问题笔记——JS初学篇
- 记录一下：Unity5.5.1和Android 交互学习以及遇到的问题
- 学习两天Vue.js遇到的问题及解决办法。
- 【c语言学习笔记】指针数组和数组指针以及在做题的时候遇到的问题
- 前端主流框架vue学习笔记第一篇
- 【Web前端】Vue.js 项目中遇到的一些问题汇总
- 关于Vue.js一些问题和思考学习笔记（2）
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
- C++ 学习拾遗 —— 点滴记录C++学习过程中遇到的问题以及整理
- 用Vue.js往前端填充数据时遇到的问题
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 （ 摘自zdwzdwzdw）
- 关于Vue.js一些问题和思考学习笔记（1）
- 前端主流框架vue学习笔记第二篇
- 记录学习laravel框架过程中遇到的问题