vue.js 学习笔记（一）

gaosboy 发布于2019-08-19 17:57 / 2310人阅读

摘要：一缩写完整语法缩写完整语法缩写二缩写完整语法缩写三过滤器四条件渲染五列表渲染数组变动检测包装了被观察数组的变异方法，故它们能触发视图更新。

一、v-bind 缩写

二、v-on 缩写

三、过滤器

{{ message | capitalize }}

四、条件渲染 v-if

Yes
No



  Sorry


  Not sorry

template-v-if

v-show

Hello!

五、列表渲染 for v-for


  
    {{ item.message }}
  

var example1 = new Vue({
  el: "#example-1",
  data: {
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
});


  
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  

var example2 = new Vue({
  el: "#example-2",
  data: {
    parentMessage: "Parent",
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
});

数组变动检测

Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()

example1.items.push({ message: "Baz" });
example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/);
});

template-v-for

对象 v-for


  
    {{ $key }} : {{ value }}
  

new Vue({
  el: "#repeat-object",
  data: {
    object: {
      FirstName: "John",
      LastName: "Doe",
      Age: 30
    }
  }
});

值域 v-for


  {{ n }}

六、方法与事件处理器 方法处理器


  


var vm = new Vue({
  el: "#example",
  data: {
    name: "Vue.js"
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // 方法内 `this` 指向 vm
      alert("Hello " + this.name + "!")
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> "Hello Vue.js!"

内联语句处理器


  
  

new Vue({
  el: "#example-2",
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
});

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法


 methods: {
  say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
};

## 事件修饰符

## 按键修饰符

全部的按键别名：enter，tab，delete，esc，space，up，down，left，right

## 其他实例

new Vue({
  el: "#demo",
  data: {
    newLabel: "",
    stats: stats
  },
  methods: {
    add: function (e) {
      e.preventDefault()
      if (!this.newLabel) {
        return;
      }
      this.stats.push({
        label: this.newLabel,
        value: 100
      });
      this.newLabel = "";
    },
    remove: function (stat) {
      if (this.stats.length > 3) {
        this.stats.$remove(stat); // 注意这里的$remove
      } else {
        alert("Can"t delete more!")
      }
    }
  }
});

七、过渡 CSS 过渡

hello

然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则:

/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

你可以在同一元素上通过动态绑定实现不同的过渡：

hello 
new Vue({
  el: "...",
  data: {
    show: false,
    transitionName: "fade"
  }
}

另外，可以提供 JavaScript 钩子:

Vue.transition("expand", {

  beforeEnter: function (el) {
    el.textContent = "beforeEnter"
  },
  enter: function (el) {
    el.textContent = "enter"
  },
  afterEnter: function (el) {
    el.textContent = "afterEnter"
  },
  enterCancelled: function (el) {
    // handle cancellation
  },

  beforeLeave: function (el) {
    el.textContent = "beforeLeave"
  },
  leave: function (el) {
    el.textContent = "leave"
  },
  afterLeave: function (el) {
    el.textContent = "afterLeave"
  },
  leaveCancelled: function (el) {
    // handle cancellation
  }
});

GPU云服务器云服务器学习笔记一学习笔记基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79031.html

Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）

摘要：有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱，之后会进行整理优化。上次学习了vue-router的使用，让我能够在各个页面间切换，将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。注：本...

DobbyKim 2019-08-21 15:52 评论0 收藏0
(原创)vue 学习笔记

摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。开篇语我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

layman 2019-08-22 18:09 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

liukai90 2019-08-21 17:05 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

rollback 2019-08-01 17:49 评论0 收藏0