vue入门

NotFound 发布于2019-08-20 19:02 / 2403人阅读

摘要：基本信息是框架读音，类似于是一套构建用户界面的渐进式框架。我们现在可以进一步为我们的组件实现更复杂的模板和逻辑的改进，而不会影响到父单元。

基本信息

vue是mvvm框架  (model view viewmodel)    Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。

model 视图/模板
view 模型/数据
viewmodel 视图模型
model与view通过viewModel之间相互检测

起步

你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

//开发版本
//生产版本

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：

{{msg}} 
//输出Hello Vue!

学习vue更多的是学习指令和组件

指令(directives)是带有 v- 前缀的特殊属性。

v-model 在input中

能轻松实现表单输入和应用状态之间的双向绑定

![
  {{ msg }}

v-if 条件

控制切换一个元素的显示也相当简单：


  现在你看到我了

var app= new Vue({
  el: "#app",
  data: {
    seen: true
  }
})  //输出：现在你看到我了

v-for 循环

可以绑定数组的数据来渲染一个项目列表：


  
    
      {{ todo.text }}
    
  

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

v-on 处理用户输入

为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：


  {{ message }}
  

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

组件化应用构建

组件系统是 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 指令将 todo 传到每一个重复的组件中：

这只是一个假设的例子，但是我们已经设法将应用分割成了两个更小的单元，子单元通过 props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进，而不会影响到父单元。

云服务器 GPU云服务器 vue入门教程 Vue_Vue Vue vue3 学习笔记 (五)——vue3

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

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

vue.js快速入门

摘要：但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。不知道还要不要再来一个快速入门，发展得挺快，东西也像类似的全家。以前看到多少天学习系列，我都深感烦躁，短短几天怎么可以精通，那是对于他们而言。但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。回到vue本身...

MkkHou 2019-08-20 10:45 评论0 收藏0
Vue.js资源分享

摘要：中文官网英文官网组织发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。 Vue.js资源分享更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/maid...

vpants 2019-08-20 14:21 评论0 收藏0
基于 Vue2+Node+mongoDB 的前后端分离全栈练手小项目

摘要：本文源码简介之前刚入门并做好了一个简而全的纯全家桶的项目，数据都是本地模拟请求的详情请移步这里为了真正做到数据库的真实存取，于是又开始入门了并以此来为之前的页面写后台数据接口。本文源码：Github 简介：之前刚入门vue并做好了一个简而全的纯vue2全家桶的项目，数据都是本地 json 模拟请求的；详情请移步这里：vue-proj-demo 为了真正做到数据库的真实存取，于是又...

jay_tian 2019-06-26 17:20 评论0 收藏0
vue框架入门和ES6介绍

摘要：框架入门和介绍模式，是一种轻量级的前端框架，主要为模板渲染，数据同步，组件化，模块化，路由等。作者简介达叔，理工男，简书作者全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以阅读他的文章，会上瘾，帮你成为更好的自己。 vue框架入门和ES6介绍 vue-mvvm模式，vue是一种轻量级的前端框架，主要为模板渲染，数据同步，组件化，模块化，路由等。 https://cn.vu...

ChanceWong 2019-04-23 11:47 评论0 收藏0
Java学习路线总结，搬砖工逆袭Java架构师（全网最强）

摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡【打卡贴 day2...

Scorpion 2021-11-18 10:02 评论0 收藏0
vue简单入门（一）vue是什么，为什么我们要学vue？

摘要：是什么为什么我们要使用说到了，我们就不得不先聊一下是什么以及为什么我们要使用，他能给我们的开发带来什么样的便利呢首先，我们来看一下的自我介绍读音，类似于是一套用于构建用户界面的渐进式框架。作为一个刚入行不久的菜鸟不知从什么时候开始就有了写一个自己的专栏的想法，刚好今天没事就给自己挖一个坑，分享一下我对vue的见解和一些领悟，整个专栏应该会包括vue，vue-cli，vue-route...

Lucky_Boy 2019-08-22 18:34 评论0 收藏0