Vue基础知识点总结

Isaac
293 阅读3分钟

前端框架与库的区别？

  • jQuery库 => DOM(操作DOM) + ajax请求

  • art-template库 => 模板引擎 => 简化DOM操作

  • 框架

    1. 全方位功能齐全
    2. 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能

    ps：在KFC里，框架就像是KFC的一个套餐而Vue就像是KFC的全家桶（vue, vue-router, vuex, vue-clli脚手架）

  • 代码上的不同

    1. 一般使用库的代码是调用某个对象方法，我们自己把控库的代码

    2. 一般使用框架的，其框架帮助运行我们已经编写好的代码

      （框架：初始化自身的一些行为，执行你所编写的代码并释放一些资源）

Vue起步

  • 引包：

    <script src='./vue.js'></script>

  • 启动：

    new Vue({
  el:'#app', //挂载 => 相当于是一个目的
  data:{
    //保存数据的地方
  },
  template:`模板内容` //如果要使用模板，要使用tab键上边的反引号
});

插值表达式

  • {{表达式}}

    1. 对象（不要连续使用3个{{{name: 'Isaac'}}}）
    2. 字符串（{{'Isaac'}}）
    3. 判断后的布尔值（{{ true }}）
    4. 三元表达式（{{1 < 2 ? '正确' : '错误'}}）

  • 可以用于页面中简单粗暴的调试

ps：要使用插值表达式{{msg}}，必须在data中声明该属性

指令

  • vue提供了一些为了更方便输出页面和数据的操作，叫做指令，以v -xxx表示。
  • 指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关DOM操作的绑定

Vue中常用的v- 指令演示

  • v-text：相当于元素的textContent属性，必须是双标签，与插值表达式的效果是一样的，使用较少
  • v-html：相当于元素的innerHTML
  • v-if：判断是否插入这个元素，相当于对元素的销毁和创建（v-else if，v-else与其搭配使用）
  • v-show：隐藏元素，如果确定要隐藏，会给元素的style加上display:none，它是基于css的样式切换

v-if和v-show的区别（官网解释）

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-bind使用

  • 给元素的属性赋值

  • 语法：v-bind: 属性名 = "常量 || 变量名"

  • 简写形式：: 属性名 = "变量名"

    <div v-bind: 原属性名 = "变量"> </div>
<div :属性名 = "变量"> </div>

v-on的使用

  • 用于处理自定义的原生事件

  • 普通使用：v-on: 事件名 = "表达式 || 函数名"

  • 简写形式：@事件名 = "表达式"

  • 自定义的原生事件用到的函数需要在methods属性中进行声明

    let vm = new Vue({
  ...
  //
  methods: {
    fn() {
      
    }
  }
})

V-model双向的数据绑定

  • 双向数据流（绑定）
    1. 页面改变影响内存（js）
    2. 内存（js）改变影响页面

v-bind和v-model的区别

  • <input v-model = "name">

    1. 双向数据绑定，页面对于input的value改变，能影响内存中name变量
    2. 内存js改变name的值，会影响页面重新渲染最新值

  • <input v-bind = "name">

  1. 单向数据绑定，内存改变影响页面改变

  • v-model => 它引起的改变会影响到其他

    v-bind => 它引起的改变不会影响其他

  • v-bind就是对属性的简单赋值，当内存中值改变，还是会触发重新渲染

v-for的使用

  • 基本语法：v-for: "item in arr"

  • 对象的操作：v-for: "item in obj"

  • 如果是数组没有id

    v-for = "(item, index) in arr : class = "index" : key = "index"

  • v-for的优先级最高

侦听器watch

  • Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

    ps：基本的数据类型可以使用watch进行监听，复杂的数据类型Object、Array要深度监视

  • 当需要在数据变化时执行异步或开销较大的操作时，使用watch来响应数据的变化是最有用的

 <div id='app'>
   <input type="text" v-model='msg'>
   <h3>{{msg}}</h3>
   <h3>{{stus[0].name}}</h3>
   <button @click='stus[0].name = "Isaac"'>改变</button>
</div>

<script src="./vue.js"></script>
<script>
  // 基本的数据类型可以使用watch直接监听，复杂数据类型Object Array 要深度监视
  new Vue({
    el: '#app',
    data: {
      msg:'',
      stus:[{name:'haozijian'}]
    },
    watch: {
      // key是属于data对象的属性名 value:监视后的行为 newV: 新值 oldV: 旧值
      'msg':function(newV, oldV){
        if(newV === '100'){
          console.log('hello');
        }
      },
      // 深度监视：Object Array
      "stus":{
        deep:'true',
        handler:function(newV, oldV){
          console.log(newV[0].name);
        }
      }
    },
  })
</script>

计算属性computed

  • 对于复杂的逻辑，使用计算属性，计算属性是基于数据的响应式依赖进行缓存的
<div id='app'>
  {{reverseMsg}}
  <h3>{{fullName}}</h3>
  <button @click='handleClick'>改变</button>
</div>
<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello world',
      firstName: '郝',
      lastName: '帅'
    },
    methods: {
      handleClick(){
        this.msg = '计算属性computed';
        this.lastName = '衰';
      }
    },
    computed: {
      // computed默认只有getter方法
      // 计算属性最大的优点：产生缓存 如果数据没有发生变化 直接从缓存中取
      reverseMsg: function () {
        return this.msg.split('').reverse().join('')
      },
      fullName: function () {
        return this.firstName + this.lastName;
      }
    },
  })
</script>

过滤器

  • Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
<div id="app">
  <h3>{{price | myPrice('¥')}}</h3>
  <h3>{{msg | myReverse}}</h3>
</div>
<script src="./vue.js"></script>
<script>
  // 创建全局过滤器
  Vue.filter('myReverse', (val) => {
    return val.split('').reverse().join('');
  })
  // 为数据添油加醋
  // ¥  $20
  new Vue({
    el: '#app',
    data: {
      price: 10,
      msg:'hello 过滤器'
    },
    // 局部过滤器
    // 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示：
    filters: {
      myPrice: function (price, a) {
        return a + price;
      }
    }
  })
</script>

ps：当全局过滤器和局部过滤器重名时，会采用局部过滤器

avatar
文章
阅读
粉丝