当前位置: 萬仟网 > IT编程>开发语言>JavaScript > Vue 学习笔记

Vue 学习笔记

2019年10月09日 17:47  | 萬仟网IT编程  | 我要评论

vue对比jquery

vuemvvm 数据驱动影响视图 适用于复杂数据
jquerymvc 视图塞入数据 适用于复杂视图动效

(其实都是js 的封装,以及对html 的扩展)

相关指令

v-text 等同大胡子效果 但是会转换为字符串

v-html 绑定html属性

  <div id="app">
    <div v-html="message"></div>
  </div>

  <script>
    new vue({
      el: '#app',
      data: {
        message: '<h1>菜鸟教程</h1>'
      }
    })
  </script>

v-if三兄弟 只会渲染判断为真的dom
v-show 绑定值的布尔值来判断是否显示 会渲染整个dom只是会根据布尔只能判断是否增加display none这个内联样式
v-ifv-show的区别:
v-if有更高的切换消耗;
v-show有更高的初始渲染消耗;
v-if适合运营条件不大可能改变;
v-show适合频繁切换

v-for: 循环

v-once 只会渲染一次 即使数据改变

v-bind 用来响应地更新html属性 使用场景:绑定接口请求得到的数据 简写: : ,可以绑定class和内联样式

<style>
  .class1 {
    background: #444;
    color: #eee;
  }
</style>

<body>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

  <div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
    <br><br>
    <!-- 单引号只是对下面对两个class1作出区分 不使用也可以 前面是class 样式 后面是bool值 -->
    <div v-bind:class="{'class1': class1}">
      directiva v-bind:class
    </div>
  </div>

  <script>
    new vue({
      el: '#app',
      data: {
        class1: false
      }
    });
  </script>
</body>

v-on:用来监听dom事件 其修饰符可以指定键盘事件
v-on:click 简写@click:事件监听
v-model:双向绑定 一般结合input textarea (多行) 使用 其有修饰符.lazy .number .trim

生命周期

以下都是钩子函数

beforecreate(创建前)
created(创建后)
beforemount (载入前)
mounted(载入后)
beforeupdate(更新前)
updated(更新后)
beforedestroy(销毁前)
destroyed(销毁后)

(在不同的时间点,可以进行不同的操作。)

计算属性

computed:计算属性

区别与methods
性能相比methods要高 因为有缓存 只有在相关值发生改变时才会触发 在第一次渲染页面也会主动触发

计算属性的数据源未发生变化 则不会触发响应的计算属性
属性区分于方法

 <div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedmessage }}</p>
  </div>

  <script>
    var vm = new vue({
      el: '#app',
      data: {
        message: 'runoob!'
      },
      computed: {
        // 以下的函数将提供给计算属性的 getter   计算属性默认只有getter
        reversedmessage: function() {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })
  </script>

计算属性中默认存在getter方法 我们可以手动添加setter方法:

<div id="app">
    <p>{{ site }}</p>
  </div>

  <script>
    var vm = new vue({
      el: '#app',
      data: {
        name: 'google',
        url: 'http://www.google.com'
      },
      computed: {
        site: {
          // getter
          get: function() {
            return this.name + ' ' + this.url
          },
          // setter
          set: function(newvalue) {
            var names = newvalue.split(' ')
            this.name = names[0]
            this.url = names[names.length - 1]
          }
        }
      }
    })
    // 调用 setter, vm.name 和 vm.url 也会被对应更新
    vm.site = '菜鸟教程 http://www.runoob.com';  //触发set方法
    document.write('name: ' + vm.name); //动态更新dom树
    document.write('<br>');
    document.write('url: ' + vm.url);
  </script>

过滤器

vue中可以自定义过滤器 被用作常见地文本格式化

<div id="app">
    <!-- 过滤器的用法 -->
    {{ message | capitalize }}
  </div>

  <script>
    new vue({
      el: '#app',
      data: {
        message: 'runoob'
      },
      filters: {
        capitalize: function(value) {
          if (!value) return ''
          value = value.tostring()
          return value.charat(0).touppercase() + value.slice(1) //对字符串的第一个字母进行大写
        }
      }
    })
  </script>

监听属性

watch:响应数据变化

<div id="computed_props">
    <!-- 分别绑定kilometers和meters -->
    千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters">
  </div>
  <p id="info"></p>
  <script type="text/javascript">
    var vm = new vue({
      el: '#computed_props',
      data: {
        kilometers: 0,
        meters: 0
      },
      methods: {},
      computed: {},
      watch: {
        kilometers: function(val) {  //dom中的相关绑定会触发对应的观察属性
          this.kilometers = val;
          this.meters = val * 1000;
        },
        meters: function(val) {
          this.kilometers = val / 1000;
          this.meters = val;
        }
      }
    });
    // $watch 是一个实例方法 $作用与vue自带的属性区别u与自定义的属性
    vm.$watch('kilometers', function(newvalue, oldvalue) {
      // 这个回调将在 vm.kilometers 改变后调用
      document.getelementbyid("info").innerhtml = "修改前值为: " + oldvalue + ",修改后值为: " + newvalue;
    })
  </script>

样式绑定

  • 单样式绑定:
<style>
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

<body>
  <div id="app">
    <!-- 主要是v-bind的使用 -->
    <div v-bind:class="{ active: isactive }"></div>
  </div>

  <script>
    new vue({
      el: '#app',
      data: {
        isactive: true
      }
    })
  </script>
  • 多样式绑定:
<style>
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }

  .text-danger {
    background: red;
  }
</style>

<body>
  <div id="app">
    <div class="static" v-bind:class="{ active: isactive, 'text-danger': haserror }">
    </div>
  </div>

  <script>
    new vue({
      el: '#app',
      data: {
        isactive: true,
        haserror: false
      }
    })
  </script>

组件

组件是整个vue知识体系中最重要的一个模块
组件的作用是:复用
前端路由相对于传统路