Js学习笔记(三)..vue

Js-vue学习

vue 文本插入三种方式:

 

mes值我设置了“<b>很帅</b>”  具体在文章结尾

1.v-cloak:  

 <p v-cloak="mes">我爱罗{{mes}}</p>

上面等价于 下面

 <p >我爱罗{{mes}}</p>

输出结果:我爱罗<b>很帅</b>

2.v-text:

<p v-test="mes">我爱罗{{mes}}</p>

输出结果仅仅为: <b>很帅</b>   因为v-test会把整个元素内的内容变成{{mes}}值

3：v-html:

 <p v-html="mes">我爱罗{{mes}}</p>

输出结果:我爱罗很帅  ：注意到 <b>标签不见了 ，很帅俩个字加粗了，因为v-html会解释成html语言呈现给你

vue的绑定机制 :

1. v-model：双向绑定数据 只能在表单元素中  <input> <selector> <textarea>等 :

 <input type="text" v-model="mes"><p >{{mes}}</p>

可以看到改变 input里的数值  下面p的数值也会改变

 

 

2. v-bind:  可以缩写为一个冒号 :  绑定属性  url我设置了 https://www.baidu.com 

<a :href="url">点我</a>  or <a v-bind:href="url">点我</a>

3. v-on:绑定事件  可以缩写成 @

<input type="button" v-on={'click':'methods','mouseleave':'methods'} value="test">

以上的点击，鼠标移动事件，  对应的methods在Vue文件设置 可以methods设置成consolt.log  xx方便测试

v-on的冒泡事件的应用:

<div @click="methods"><input type="button" @click="methods"></div>

这里把div和a都监听了点击事件，把methods设置成consolt.log 可观察到:

鼠标单击按钮  input的methods被触发 ，紧接着是div的methods触发， (从里到外)因为只是单击button，div冒泡了 ，所以叫冒泡事件，

vue有对此进行处理:

1  @click.top

<div @click="methods"><input type="button" @click.stop="methods"></div>

@click.top设置在input中 ， 单击input，input被触发(冒泡),div不会被触发(不冒泡)   单击input 是stop(停止)冒泡事件

2   @click.capture   (捕获的意思)

<div @click.capture="methods"><input type="button" @click="methods"></div>

这里div捕获了冒泡事件   优先触发  接着是按从里到外触发   如果在div和Input之间设置一个<p @click=‘methods’> 点击按钮可以看到先触发了div  再是input 接着是<p>

3 @click.self(自己触发了才算)：

 顾名思义  设置了这个，就不会被冒泡事件被动触发 ，只有单击他才触发

4 @click.once （只是触发一次，不会多次） 能被冒泡事件触发能主动触发，一次后接着就不在触发了

vue中的迭代

v-for  list 为  ['小明‘，’小红‘]

<p v-for="(item,i) in list">   索引值（）=={{i}}  真实数字{{item}}</p>

输出结果为   索引值0  小明 

                   索引值1 小红

总结：索引值放在最后， 而且索引值不填也行

data里不用设置任何数字迭代10 ：v-for=“count in 10”     输出  从1，10

 <p v-for="item in list" v-bind:key="item.id" ></p>注意 v-bind可以直接写冒号，key必须要指定一个字符串或数字类型的键值，key可以不写，但是写了更加严谨，不会犯错. 想知道为什么的评论提问我会回答

 

小东西:this.list.push({xx:xxx}) 下面添加   or  this.list.unshift({xx:xxx}) 上面添加

v

    <input type="text" v-model="mes"><p v-show="mes">我吃土了</p>
    <br><input type="text" v-model="cc"><p v-if="cc">我吃斋了</p>

把Input内容删除后 mes &&cc值都为空，所以俩个<p>元素都隐藏   不同的是  v-if 在 f12那里看不到消失了 而v-show可以看到

（display:none） 

v-if 切换消耗性能过高    v-show 初始消耗性能过高 

 

以上皆为个人理解，如有错误之处，欢迎留言指正