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  又称为挂载点

<div id="app"></div>
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.js

MVVM

mvvm  廖雪峰

vue 项目代码

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

  1. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  2. vue - vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  3. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  4. Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用

    vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...

  5. 基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式

    在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...

  6. 【vue】vue +element 搭建项目,组件之间通信

    父子组件通信 父 通过props属性给 子传递数据 子 操作 父  this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...

  7. 中小研发团队架构实践之生产环境诊断工具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如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  8. 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...

  9. 01 . Vue简介,原理,环境安装

    简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库 ...

随机推荐

  1. C++入门经典-例3.15-使用do-while循环计算1到10的累加

    1:代码如下: // 3.15.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  2. LeetCode328----奇偶链表

    给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性. 请尝试使用原地算法完成.你的算法的空间复杂度应为 O(1),时 ...

  3. LeetCode 54. 螺旋矩阵(Spiral Matrix) 剑指offer-顺时针打印矩阵

    题目描述 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, ...

  4. 自动化框架Quantum Automation Framework+cucumber+perfecto

    名词解释 Quantum: 一款基于JAVA的自动化框架,支持手机和桌面WEB的自动化测试.与cucumber和perfecto实现了整合,用于BDD自动化. Refer: http://projec ...

  5. python 实验2 分支结构

    该博客专为我的小伙伴们提供参考而附加,没空加上代码具体解析,望各位谅解 实验一   货币转换   ‪‪‪‪‪‫‪‪‪‪‪写一个程序进行人民币和欧元间币值转换,其中:‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫ ...

  6. idea -- spring datasource配置文件不显示datasource.properties文件对应属性的值,错误提示cannot resolve property key

    原文:https://yq.aliyun.com/articles/657711 点击 文件 顶部的 蓝色 MVC application context,修改为Local File

  7. Selenium 2自动化测试实战18(上传文件)

    一.上传文件 上传文件是比较常见的web功能之一,但WebDriver没有提供专门用于上传的方法. 一般web页面的上传功能的操作需要单击“上传”按钮后打开本地的Window窗口,从窗口选择本地文件进 ...

  8. 【C++学习笔记】static 关键字

    (阅读<C++ primer plus>可知 C++的static关键字跟Java还是很类似的) 为什么需要static关键字:在文件A中定义的非局部变量language,在文件B中可以通 ...

  9. 【SSM】---增删改查

    20:43:06 package com.chinasofti.dao; import java.util.List; import com.chinasofti.entity.User; publi ...

  10. 在Windows服务器安装ss服务端用于逃脱公司行为管理

    1.安装:python-2.7.14.amd64.msi 2.配置环境变量 3.Win64OpenSSL-1_0_2n.exe 4.安装ss服务端:pip install **adowsocks 5. ...