什么是Vue.js

简单小巧的核心
Vue.js压缩后很小，只有17KB
渐进式技术栈
可以一步一步地、阶段性地来使用Vue.js，只使用自己现阶段需要的，不必一开始就使用它所有的东西

MVVM（Model-View-ViewModel）模式

由MVC模式衍生而来
视图层变化时，自动更新到视图模型，反之亦然，两者之间通过双向数据绑定建立联系

使用Vue.js

传统的前端开发模式
jQuery+RequireJS/SeaJS+artTemplate/doT+Gulp/Grunt
Vue.js的开发模式
1.引入Vue.js
自动识别最新的稳定版的Vue.js
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
或者指定某个具体的版本的Vue.js
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>
还可以将代码下载下来，通过自己本地的路径来引用
2.创建Vue实例

🔴el用于指定页面中的一个DOM元素挂载Vue实例。挂载后，可以通过'$'来访问该元素（注：Vue的实例属性和方法以'$'开头）

🔵data用于声明需要双向绑定的数据。可以通过Vue实例本身来访问；除了显示地声明数据以外，还可以指向一个变量

生命周期

Vue实例创建时会经历一系列初始化过程，这其中会调用相应的生命周期钩子（类似于jQuery中的ready()），利用这些钩子我们可以选择时机执行我们的业务逻辑，常用的钩子有:
(1)created 实例创建完后调用
(2)mounted el挂载到实例上后调用
(3)beforeDestroy 实例销毁之前调用
这些钩子与el和data类型，作为选项写入Vue实例内，钩子的this指向调用它的Vue实例

插值、表达式

使用'{{}}'来表达文本插值，会自动将双向绑定的数据实时显示出来

例🔷显示当前时间

v-html输出HTML，不解析

v-pre显示{{}}标签，不进行替换

在'{{}}'中，除了使用简单的绑定属性值外，还可以使用javascript的表达式；不能使用自定义的全局变量，只能使用Vue白名单内的全局变量

过滤器

通过在'{{}}'插值尾部添加一个管道符（'|'），自定义一个过滤的规则，并在Vue实例中设置filters选项来进行过滤
例🔷对时间进行格式化处理

<!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>过滤器</title>
      </head>
      <body>
        <div id='app'>
          {{date|formatDate}}
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
          var padDate = function(value){
            return value < 0 ? '0' + value:value;
          }
          var app = new Vue({
            el:'#app',
            data:{
              date:new Date()
            },
            filters:{
              formatDate:function(value){
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth()+1);
                var day = padDate(date.getDate());
                var hours = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var seconds = padDate(date.getSeconds());
                return year+'-'+month+'-'+day+'-'+hours+':'+minutes+':'+seconds;
              }
            },
            mounted:function(){
              var _this = this;
              this.timer = setInterval(function(){
                _this.date = new Date();
              },1000);
            },
            beforeDestroy:function(){
              if(this.timer){
                clearInterval(this.timer);
              }
            }
          })
        </script>
      </body>
    </html>

setInterval()

过滤器可以多个串联，也可以接收参数
{{message|filterA|filterB}}
{{message|filterA('arg1','arg2')}}

注：过滤器常用于处理简单的文本转换，如果涉及复杂的数据变换，应当使用计算属性

指令与事件

指令以'v'为前缀，当其表达式的值改变时，相应地将某些行为应用到DOM上
v-if

v-bind
动态更新HTML元素上的属性

v-on
用来绑定事件监听器

v-on监听原生的DOM事件，如click、dblclick、keyup、mousemove等
表达式可以是方法名（方法写在Vue实例的methods属性里），也可以直接使用内联语句（类似内联样式）的形式

可以像访问数据那样来通过实例来调用方法，例如：

语法糖

语法糖是在不影响功能的情况下，添加某种方法以实现相同的效果，方便程序的开发（可简单看成是简写）
v-bind简写为':'
v-on简写为'@'

计算属性

当'{{}}'内的表达式过长或逻辑复杂时，难以维护，这是就需要使用计算属性
计算属性以函数的形式写在Vue实例的computed属性内

例如：

使用计算属性改写为下：

计算属性还可以依赖多个Vue实例的数据

<!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>计算属性可以依赖于多个Vue实例</title>
      </head>
      <body>
        <div id='app'>
          总价：{{prices}}
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
          var app = new Vue({
            el:'#app',
            data:{
              package1:[
                {
                  name:'iphone7',
                  price:7199,
                  count:2
                },
                {
                  name:'iPad',
                  price:2999,
                  count:1
                }
              ],
              package2:[
                {
                  name:'apple',
                  price:3,
                  count:5
                },
                {
                  name:'banana',
                  price:2,
                  count:10
                }
              ]
            },
            computed:{
              prices:function(){
                var prices = 0;
                for(var i = 0;i < this.package1.length;i++){
                  prices += this.package1[i].price*this.package1[i].count;
                }
                for(var i = 0;i < this.package2.length;i++){
                  prices += this.package2[i].price*this.package2[i].count;
                }
                return prices;
              }
            }
          });
        </script>
      </body>
    </html>

每一个计算属性都包含一个getter和一个setter，不特殊声明时默认使用getter读取计算属性，手动修改一个计算属性的值时会触发setter函数，执行一些自定义的操作

手动修改fullName时，setter函数会被调用，视图同时会被更新

除了处理文本插值外，计算属性还常用于动态地设置元素的样式名称class和内联样式style，使用组件时，也常用于动态传递props
计算属性可以依赖于其他的计算属性；而且不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据

使用计算属性还是methods
使用方法（在Vue实例内设置methods选项）有时也能达到与使用计算属性（在实例内设置computed选项）相同的效果，但计算属性是基于它的依赖缓存的，只要依赖的数据发生变化，计算属性就会被更新；而如果依赖不是响应式的，计算属性也不会更新，这时应使用methods，只要重新进行渲染，就可实现更新

posted on 2021-11-04 14:30 KK的备忘录阅读(70) 评论(0) 收藏举报

刷新页面返回顶部