vue学习Day01-Day03

当当当，最近在边学vue边实习，公司用到的是vue框架，而我之前先学的是react框架，所以我最近要学习vue框架，有些东西是相通的，难度还可以吧～～

vue 学习 Day1:

1.使用插值表达式会出现闪烁问题，使用“v-text”指令却不会?

因为js还没加载完成的话，插值表达式被当成字符串渲染了，等js加载完成再解析成数据

。可通过v-cloak解决闪烁问题

  V-cloak可以和css规则：[v-cloak]{display:none}一起用，隐藏未编译的插值表达式直到实例准备完毕

。插值表达式只会插入内容，不会清除其余的内容；v-text会把之前的内容全部清空 （今后用插值表达式多一些）

2.v-bind: 可以为元素的属性 绑定 一些数据

V-bind: 可以简写成 ：

若想实现表达式的拼接，被拼接的 字符串 一定要用引号包裹起来，否则会被当作 变量解析

eg.  :title=“btnTitle+ ‘这是追加的内容’”

3.v-on: 为元素绑定事件。简写是@

绑定的事件处理函数必须定义到VM实例的methods属性中 v-on:click=“add(1,2,3)”

在methods中如果想访问data中的值，只能通过this.xxx来访问

当data中的数据变化之后，会被VM调度者监听到，然后，自动把最新的数据应用到页面上

4.走马灯效果：

卡住的地方：用定时器实现嘛，怎么写呢

解决：1.先截取第一个字符放到结尾用substring

         2.用setInterval    里面用箭头函数，内部的this永远指向外部的this

          3.用类似节流的方式清除浮动

5.v-bind只能实现数据的单向绑定

v-model双向绑定 只能运用在表单元素中

6.案例简易计算器：

卡住的地方：

    1.option的写法:+

里面的value是用在switch的条件判断中的

    2.要记得写parseFloat（试过不写也行）

7.事件修饰符

事件触发是有冒泡机制的

@click.stop 阻止冒泡

@click.prevent阻止默认事件

@submit.prevent 阻止submit的后缀名（默认事件）

.capture 添加事件侦听器时使用捕获事件

.self 只当事件在该元素本身触发时触发回调（比如不是子元素）

.once 事件只触法一次

self和stop的区别：

Self只管自己别的不管 stop所有冒泡都被阻止了

8.vue中的类样式

   1.在vue中使用v-bind为元素绑定数组类样式

 :class=“[‘red’,issmall?’small’:’’]” 用三元表达式判断要不要加这个类样式 

简写成:class=“[‘red’,{small: issmall}]” 用对象简化三元表达式

   2.传递对象作为类样式

  :class=“{red:true, thin:true}”

9.vue中的内联样式

   ：style=“{color:red,’font-size’:’40px’}”加单引号是在有-时，要符合对象的写法

10.v-for循环。循环的每一项都要添加：key属性

其中：key属性只接受number或者string类型的数据。：key指定的值必须具有唯一性

{{I}}——{{item.name}}

元素 索引

迭代对象中的属性

{{I}}——{{item.name}}

元素 索引 

11. V-if和 v-show只有一个作用：根据指定的标识符切换元素的显示和隐藏状态

12345

12345

。V-if是实时的创建或移除元素

。v-show是 伪元素 添加或移除display:none

一般来说，v-if 有更高的 切换消耗 

而 v-show 有更高的 初始渲染消耗。

 因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

vue学习 Day2

1.作业练习

遇到的问题：对象数组忘记怎么遍历了？用v-for；

               对象里面的字符串不能直接打要用引号；

          不会单个改变样式，一变全红了，自己的思路是排他法，但是不会

解决办法：设置一个指定项索引，和点击函数。点击时把此时的索引号赋值给选定的索引，就实现了 跟排他法没有任何关系

    id:{{item.id}}------name:{{item.name}}

 changeIndex(index){

 this.selectindex=index;

},

2.品牌列表增删改案例

遇到的难点：1）表格的写法忘记了？tr,td,th代表的意思忘记了2）插值表达式一定要{{item.id}}

 3）删除数组中的对象可以根据id进行删除，filter方法和findIndex方法要知道！！4）splice删除的。

5）怎么查找搜索？

解决办法：tr是包在外面的 th是thead td是tbody

搜索查找要注意v-for一个活的函数，不是一个死的列表 v-for=“item in search()”

search中

方法一：

this.list.name.indexOf(this.keywords)!==-1说明有元素

⭐️任意str.indexOf(‘’)为0，不为-1

方法二：

this.list[I].name.includes(this.keywords)

⭐️任意str.includes(‘’)为true

方法三：

filter过滤

const newArr=this.list.filter((item)=>{

 Return item.name.includes(this.keywords)

})

Return newArr

3.手动实现findIndex

要用callback回调函数 

Array.prototype. findIndex=function(callback){

    for(let I=0;i

   Const res=callback(this[I]);

如果调用用户传递的callback，得到的返回值是true，就表示找到了用户想用的那一项

   if(res) return i；

}

}

4.双向数据绑定：能让我们修改表单后，不必自己操作DOM元素获取表单的值；单向数据绑定：不必自己操作dom去渲染数据

5.过滤器

只能使用在插值表达式中或者v-bind中，不能使用在其他地方，如v-text

使用vue中的过滤器并不会修改原数据，只是在展示数据的时候，做了一层包装而已

全局过滤器

Vue.filter(“过滤器将来被调用时候的名称”，过滤器的处理函数（data）{  })

注意：1.过滤器的处理函数中，第一个形参，作用已经被规定死了，永远是 管道符 之前的值

2.过滤器的处理函数中必须有返回值 3.可以连续使用管道符，调用多个过滤器，永远以最后一个过滤器为准

Vue.filter("strFormate",function(data,str="的"){ return data.replace(/的/g,str)})

私有过滤器

在实例里写filters:{

addstr:function(data){

Return data+”~~~~~~”

}

}

如果全局过滤器和私有过滤器重名了遵循就近原则，优先调用自己的过滤器

6.全局自定义方法

Vue自定义指令的名称中，不要写v-前缀，但是，在调用指令的时候要在前面加上v-

Vue.directive(“指令的名称”,{

   bind:function(el,binding){

    当指令绑定到的元素被Vue实例解析的时候，就会立即执行 bind函数

},

   inserted:function(el,binding){

    当指令绑定到的元素，被插入到文档的父节点的时候调用

},

})

顺序先bind后inserted 

今后在自定义指令的时候，如果需要 操作元素的js行为 最好写到inserted中；如果操作 样式 最好写到bind中

Binding中value属性指令的绑定值（会计算）

              Expression属性是字符串形式的指令表达式

Vue.directive('color', {  bind:function(el,binding){

//传值了就使用传的值，没传值就用默认的red        el.style.color=binding.value||'red'},

inserted:function(el){}

})

7.自定义私有指令

在vm实例里写directives{

bold:{

 bind:function(el,binding){

}

}

}

指令函数式简写：如果指令给定的是function

，则等同于把这个function中的代码，分别定义到了bind和update中去 

Italic:function(el,binding){

 el.style.fontStyle=“italic”

}

8.按键修饰符

@keyup.enter=“add”

vue学习Day3

1.生命周期钩子

Vue实例分为三个阶段：创建、运行、销毁

在实例运行的三个阶段中，总是伴随着各种各样的事件，这些事件统称为 实例的 生命周期函数（钩子函数）

beforecreate

created

beforemount

mounted

beforeupdate

updated

beforedestroy

destroyed

初始化data、methods----根据数据渲染dom（此时dom在内存里）——创建好的dom挂载到页面上

若data改变，选择性的重新渲染和改变dom树，再挂载，保持data和页面的同步

2.使用vue-ressource实现get、post、jsonp请求

 

   

用async和await结合来发送请求

 async getRequest(){

 const {body}=await this.$http.get("http://www.liulongbin.top:3005/api/getlunbo")            console.log(body);           },

async postRequest(){

const {body}=await this.$http.post("http://www.liulongbin.top:3005/api/post",{name:"papepig",age:12})

console.log(body);

},

 async jsonpRequest(){

const {body}=await this.$http.jsonp("http://www.liulongbin.top:3005/api/jsonp")            console.log(body);

 }

3.使用axios来发送请求

引入包的顺序没有强制规定

注意axios不支持jsonp请求

 Vue.prototype.$http=axios

        var vm=new Vue({

        el:"#app",

        data:{

        },

        methods:{

 async getRequest(){

const {data}=await axios.get("http://www.liulongbin.top:3005/api/getlunbo")               console.log(data);            },

async postRequest(){

const {data}=await this.$http.post("http://www.liulongbin.top:3005/api/post",{name:"papepig",age:12}console.log(data);

},} })

4.jsonp的实现原理

原理：

1）由于浏览器的安全性的限制，不允许ajax访问协议不同、域名不同、端口号不同的数据接口，浏览器认为该访问不安全；

2）可以通过创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式叫jsonp

注意：jsonp只支持get请求