Vue.js-Day01

Clect 发布于2019-08-01 16:34 / 1843人阅读

摘要：现在，我们可以使用指令将待办项传到每一个重复的组件中现在我们为每个提供待办项对象待办项对象是变量，即其内容可以是动态的蔬菜奶酪随便其他什么人吃的东西

本来是准备学习angular的，但是总是卡在开头看不下去，干脆换个框架，那就vue吧!
使用jquery要引入特定的库，那使用vue也类似，可以在头部引入

我觉得vue最重要的理念就是将值和DOM绑定在一起，将数据渲染进DOM有以下几种方式：

1.文本插值


      {{ message }}

    
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
})

2.绑定在标签上


  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  


var app2 = new Vue({
  el: "#app-2",
  data: {
    message: "页面加载于 " + new Date()
  }
})

这里类似v-bind的属性称之为（vue的）指令，该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。

处理数据时，经常会用到if判断和循环，在vue里面也有这些应用

1.条件判断


  现在你看到我了


var app3 = new Vue({
  el: "#app-3",
  data: {
    seen: true
  }
})

2.循环


  
    
      {{ todo.text }}
    
  


var app4 = new Vue({
  el: "#app-4",
  data: {
    todos: [
      { text: "学习 JavaScript" },
      { text: "学习 Vue" },
      { text: "整个牛项目" }
    ]
  }
})

我们还可以给DOM绑定一个调用 Vue 实例方法的事件监听器：


  {{ message }}
  


var app5 = new Vue({
  el: "#app-5",
  data: {
    message: "Hello Vue.js!"
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split("").reverse().join("")
    }
  }
})

双向数据绑定


  {{ message }}
  


var app6 = new Vue({
  el: "#app-6",
  data: {
    message: "Hello Vue!"
  }
})

组件
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例，在 Vue 中注册组件很简单：

// 定义名为 todo-item 的新组件
Vue.component("todo-item", {
  template: "这是个待办项"
})

现在你可以用它构建另一个组件模板：

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷，我们应该能将数据从父作用域传到子组件。让我们来修改一下组件的定义，使之能够接受一个属性：

Vue.component("todo-item", {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义属性
  // 这个属性名为 todo。
  props: ["todo"],
  template: "{{ todo.text }}"
})

现在，我们可以使用 v-bind 指令将待办项传到每一个重复的组件中：


  
    
    
    
  


Vue.component("todo-item", {
  props: ["todo"],
  template: "{{ todo.text }}"
})
var app7 = new Vue({
  el: "#app-7",
  data: {
    groceryList: [
      { text: "蔬菜" },
      { text: "奶酪" },
      { text: "随便其他什么人吃的东西" }
    ]
  }
})

服务器托管专线服务 php01 Beta01 java01++ database01

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

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

学习Vue.js-Day2

书接上文/思考反馈 react,ng,vue作用差不多，那各个都有什么特点啊，实际工作中应该用哪一个？答：其实在实际工作中，组员会通过讨论而选择框架；这三个框架都能解放你的工作量，也适合做单页面应用【今天又是努力的一天】案例：品牌管理案例结合第一天所学知识，做案例；螺旋式提升开发能力案例要点：添加新品牌删除品牌筛选品牌 showImg(https://segmentfault.c...

megatron 2019-08-02 16:03 评论0 收藏0
学习Vue.js-Day2

书接上文/思考反馈 react,ng,vue作用差不多，那各个都有什么特点啊，实际工作中应该用哪一个？答：其实在实际工作中，组员会通过讨论而选择框架；这三个框架都能解放你的工作量，也适合做单页面应用【今天又是努力的一天】案例：品牌管理案例结合第一天所学知识，做案例；螺旋式提升开发能力案例要点：添加新品牌删除品牌筛选品牌 showImg(https://segmentfault.c...

BakerJ 2019-08-29 16:36 评论0 收藏0
学习Vue.js-Day2

书接上文/思考反馈 react,ng,vue作用差不多，那各个都有什么特点啊，实际工作中应该用哪一个？答：其实在实际工作中，组员会通过讨论而选择框架；这三个框架都能解放你的工作量，也适合做单页面应用【今天又是努力的一天】案例：品牌管理案例结合第一天所学知识，做案例；螺旋式提升开发能力案例要点：添加新品牌删除品牌筛选品牌 showImg(https://segmentfault.c...

Zhuxy 2019-08-23 11:42 评论0 收藏0
学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

Cheriselalala 2019-08-29 16:34 评论0 收藏0