vue的学习总结-入门

淩亂°似流年 2023-05-30 09:26 30阅读 0赞

**v-if:****通过条件渲染，由条件决定到底是否往页面中写数据(****和js****红的if/else****类似)**

**v-show:****无论条件是否满足都要往页面中写数据，只****不过由条件决定是否显示。**

**v-if      v-else -if     v-else**

**只是负责传输数据，至于是判断、赋值取决于标签。**

**vue****监听事件的快捷方法**

1.  **<input v-on:click.enter=”submit” />**
2.  **<input @click.enter=”submit” />   ** **缩写形式**
3.  **<input @click.13=”submit” />    **

**由此探讨下v-html v-text(\{ \{\}\}) v-model****的区别**

1.  **1.v-html**  
    **　　v-html****用于输出html,****它与v-text****区别在于v-text****输出的是纯文本，浏览器不会对其再进行html****解析，但v-html****会将其当html****标签解析后输出。**
2.  **2.v-text**  
    **　　v-text****是用于操作纯文本，它会替代显示对应的数据对象上的值，当绑定的数据对象上的值发生改变，插值处的内容也随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text****可以简写为\{ \{\}\}****，并且支持逻辑运算。**
3.  **3.v-model**  
    **　　v-model****通常用于*表单组件*的绑定，例如input** **，select****等。它与v-text****的区别在于它实现的表单组件的双向绑定（数据对象上的值改变，插值会发生变化；当插值发生变化时，数据对象的值也会改变。），如果用于表单控件以外标签是没有用的。**
    
    1.  **修饰符：**
        
        1.  **.lazy      <input v-model.lazy=’msg’>   ** **转化为change****事件**
        2.  **.trim      <input v-model. trim=’msg’>  ** **自动过滤输入的首尾空格**

**注册组件**

1.  **Prop****是父组件用来传递数据的一个自定义属性，父组件的数据需要通过props****把数据传给子组件，子组件需要显示的用props****选项声明“prop****”**

**vuejs** **中如何优雅的获取 Input** **值**

1.  **使用v-model: **

**如：       html****中<input type=”text” v-model=”message”>**

**Js****中获取使用this.message****即可（需要在data****中进行初始化，且会覆盖input****标签中value****自定义的值）**

**   **

**过滤器的使用  ****主要对数组进行处理**

**全局过滤器 **

**Vue.filter(‘****过滤器的名字’,function(originVal)\{return \})** **务必写return** **。。      <p>\{ \{msg | addStr\}\}</p>         ** **此处的originVal****就是msg**

**      ** **私有过滤器**

**注：以上两种过滤器同时存在的话，优先使用私有过滤器**