十四周学习前端的Vue.js框架的笔记记录，以及遇到的问题记录。什么是Vue.js?

本文链接：https://blog.csdn.net/qq_41550093/article/details/90742705

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：走马灯效果

一、事件修饰符：

二、v-bind只能实现单向绑定，从M自动绑定到V,无法实现数据的双向绑定。

v-model来实现双向绑定。

三、Vue通过属性绑定为元素设置class类样式

①直接传递一个数组，注意，这里的class需要使用v-bind做数据绑定。

.thin {

Front-weight:200;

}

<h1 :class=”[‘thin’,’itatic’,flag?’active’:’’]”>这是一个h1</h1>

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=”styleObj”>这是h1</h1>

③<h1 :style=”[styleObj1,styleObj2]”>这是h1</h1>

五、v-for指令的四种使用方式。

1.迭代数组

循环普通数组

var vm =new Vue({

el:”#app”,

data:{list:[1,2,3,4,5]},

});

</sctipt>

</div>

循环对象数组

data:{

list:[{

{id:1,name:’zs1’},

{id:2,name:’zs2’},

{id:3,name:’zs3’}

}]

}

循环对象

data:{

user:{

id:1,

name:’wp’,

gender:’女’

}

☆注意：在遍历对象的时候，除了val，key键值之外，还有第三个位置I,是索引值。

跌代数字：

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>

<head>

</head>

<body>

<label for="">Id:

</label>

<label for="">Name:

</label>

<label for="">搜索名称关键字：

</label>

</div>

<thead>

<tr>

<th>Ctime</th>

<th>Operation</th>

</tr>

</thead>

<tbody>

<td>{{ item.ctime | dateFormat() }}</td>

<td>

</td>

</tr>

</tbody>

</table>

</div>

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>

运行截图：