vue 简介 vue 项目组件

1. 概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。能够为复杂的单页应用提供驱动。

2. 用法

2.1 声明式渲染

2.1.1 改变文本 {{ message }} 打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    {{ message }}

  </div>

  <script src="vue.js"></script>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        message: 'Hello Vue!'

      }

    })

  </script>

</body>

</html>

扩展：

模板渲染方式：

生成的dom 替换了容器内容 #app 又称为挂载点

el:'#app',

template:'<h1>hello {{mes}}</h1>',

data:{

mes:'world'

}

同名数据访问优先级：data - methods - computed

2.1.2 绑定元素特性（属性） v-bind:title="message"

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-2">

    <span v-bind:title="message">

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

    </span>

  </div>

  <script src="vue.js"></script>

  <script>

    var app2 = new Vue({

      el: '#app-2',

      data: {

        message: '页面加载于 ' + new Date().toLocaleString()

      }

    })

  </script>

</body>

</html>

2.2 条件与循环

2.2.1 条件 v-if="seen" Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-3">

    <p v-if="seen">现在你看到我了</p>

  </div>

  <script src="vue.js"></script>

  <script>

    var app3 = new Vue({

      el: '#app-3',

      data: {

        seen: true

      }

    })

  </script>

</body>

</html>

2.2.2 循环 v-for="todo in todos" {{ todo.text }}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-4">

    <ol>

      <li v-for="todo in todos">

        {{ todo.text }}

      </li>

    </ol>

  </div>

  <script src="vue.js"></script>

  <script>

    var app4 = new Vue({

      el: '#app-4',

      data: {

        todos: [{

            text: '学习 JavaScript'

          },

          {

            text: '学习 Vue'

          },

          {

            text: '整个牛项目'

          }

        ]

      }

    })

  </script>

</body>

</html>

2.3 处理用户输入

2.3.1 处理组件内部数据 v-on:click="reverseMessage"

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-5">

    <p>{{ message }}</p>

    <button v-on:click="reverseMessage">逆转消息</button>

  </div>

  <script src="vue.js"></script>

  <script>

    var app5 = new Vue({

      el: '#app-5',

      data: {

        message: 'Hello Vue.js!'

      },

      methods: {

        reverseMessage: function () {

          this.message = this.message.split('').reverse().join('')

        }

      }

    })

  </script>

</body>

</html>

2.3.2 双向绑定 v-model="message"

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-6">

    <p>{{ message }}</p>

    <input v-model="message">

  </div>

  <script src="vue.js"></script>

  <script>

    var app6 = new Vue({

      el: '#app-6',

      data: {

        message: 'Hello Vue!'

      }

    })

  </script>

</body>

</html>

扩展：

input 的自定义双向绑定：：value @input="fn" （等价于 v-model ：语法糖，定义动态数据，然后监听数据变化，fn 实现当前 target.value = this.value）

2.4 组件

2.4.1 静态数据 Vue.component('todo-item', { template: '<li>这是个待办项</li>' }) <todo-item></todo-item>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-7">

    <ol>

      <todo-item></todo-item>

    </ol>

  </div>

  <script src="vue.js"></script>

  <script>

    Vue.component('todo-item', {

      template: '<li>这是个待办项</li>'

    })

    var app7 = new Vue({

      el: '#app-7'

    })

  </script>

</body>

</html>

2.4.2 动态数据从父作用域将数据传到子组件 prop

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-7">

    <ol>

      <!--

            现在我们为每个 todo-item 提供 todo 对象

            todo 对象是变量，即其内容可以是动态的。

            我们也需要为每个组件提供一个“key”，稍后再

            作详细解释。

          -->

      <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>

    </ol>

  </div>

  <script src="vue.js"></script>

  <script>

    Vue.component('todo-item', {

      props: ['todo'],

      template: '<li>{{ todo.text }}</li>'

    })

    var app7 = new Vue({

      el: '#app-7',

      data: {

        groceryList: [{

            id: 0,

            text: '蔬菜'

          },

          {

            id: 1,

            text: '奶酪'

          },

          {

            id: 2,

            text: '随便其它什么人吃的东西'

          }

        ]

      }

    })

  </script>

</body>

</html>

more1:

props 可配置校验规则：

props:{

　　name:{ type:String,require:true,default:'your name' },

　　age:{ type:Number,validator(val){ return val > 0 } }

}

more2:

复杂数据：打包处理

父组件数据结构：mes:{name:'ww',age:'11'} , 子组件传递属性使用 v-bind = "mes" 替代 :name="mes.name" ...

2.4.2.1 实际应用组件呈现形态

<div id="app">

  <app-nav></app-nav>

  <app-view>

    <app-sidebar></app-sidebar>

    <app-content></app-content>

  </app-view>

</div>

2.5 数组的变异方法：动态改变 arr 数据（不能通过改变长度及末尾添加赋值等操作来改变数组）

pop、push、shift、unshift、splice、sort、reverse （vue 内部重写了数组的这几个方法，执行时会添加渲染执行函数）

对象的改变方式：vm.$set ( vm.$set(obj,name,val) )

2.6 扩展：

vue dom的渲染是异步的，渲染完成函数 vm.$nextTick()

ref = 'idName' - this.$refs['idName'] ( ele ) \ vue 实例

3. 相关文章

vue 简介 vue 项目组件的更多相关文章

Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
vue - vue-cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用
vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...
基于Vue的工作流项目模块中，使用动态组件的方式统一呈现不同表单数据的处理方式
在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...
【vue】vue +element 搭建项目，组件之间通信
父子组件通信父通过props属性给子传递数据子操作父 this.$parent.XXX 子通过$emit传递参数或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...
中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明如何在IIS上发布，并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
01 . Vue简介,原理,环境安装
简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库 ...

随机推荐

mysql 查询每个分组的前几名
按分组排序,并查出每个分组的前3名单表 SELECT * FROM ( SELECT ZONEID, uid, NAME, fight, IF ( , ) AS rank, ( @zone := z ...
DS博客作业08—课程总结
1.当初你是如何做出选择计算机专业的决定的? 开始时我选择的专业就是网络/物联网,计算机专业是一个充满创造性的专业 2.对比开篇博客,哪些方面还存在哪些不足? 这个人就像戏台上的老将军,全身插满fla ...
Shell中的条件测试和循环语句
1.条件测试:test或[ 如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为0 运行结果: 带与.或.非的测试命令[ ! EXPR ] : E ...
js函数收集
常见js函数收集: 转自:http://www.qdfuns.com/notes/36030/2eb2d45cccd4e62020b0a6f0586390af.html //运动框架 function ...
VSCode安装go语言开发环境，go插件问题解决
在安装go插件时,会自动更新很多依赖库文件,都是从Github更新下来,但是因为Github的文件中,多有应用go官网中的文件,导致,因为网络缘故,不能直接下载,导致安装失败,如下: Instal ...
App架构设计:接口的设计
安全机制的设计现在,大部分App的接口都采用RESTful架构,RESTFul最重要的一个设计原则就是,客户端与服务器的交互在请求之间是无状态的,也就是说,当涉及到用户状态时,每次请求都要带上身份验 ...
JAVA-Runnable、Callable、FutureTask
通常,创建线程的执行单元有两种,一种是直接继承 Thread,另外一种就是实现 Runnable 接口. 但这两种都有一个问题就是无法有返回值,且子线程在执行过程中无法抛出异常.想线程有返回值,可以使 ...
[NLP] 语义网络与知识图谱入门（一）
语义网络与知识图谱入门(一) RDF/XML 本体:一种形式化的对于共享概念体系明确而又详细的说明.就是指一种抽象的模型,可以用来描述对象类型.属性以及关系类型所构成的世界. RDF/XML主要讲的就 ...
QBXTD2上午
话说lyd昨天没讲完他的该死的贪心,所以今天继续讲贪心思想是考虑AB是最快的人,CD是最慢的人,要把CD两个人送过河,只有两种方案,牵扯到四个人,并且n个规模的原问题化成了n-2个规模的子问题那么 ...
如何下载安装informatica PowerCenter
1.进入oracle官网注册新用户 https://edelivery.oracle.com/osdc/faces/Home.jspx 2.在搜索中输入: informatica 参考博客: ...

vue 简介 vue 项目 组件

vue 简介 vue 项目 组件的更多相关文章

随机推荐

热门专题

vue 简介 vue 项目组件

vue 简介 vue 项目组件的更多相关文章