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>

View Code

扩展：

模板渲染方式：

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

el:'#app',

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

data:{

mes:'world'

}

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>

View Code

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>

View Code

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>

View Code

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>

View Code

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>

View Code

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>

View Code

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>

View Code

2.4.2.1 实际应用组件呈现形态

<div id="app"><app-nav></app-nav><app-view><app-sidebar></app-sidebar><app-content></app-content></app-view>
</div>

View Code

3. 相关文章

Vue.js

MVVM

mvvm 廖雪峰

vue 项目代码

转载于:https://www.cnblogs.com/justSmile2/p/10833017.html

vue 简介 vue 项目相关推荐

【Vue】Vue的简介和特性
一.Vue简介 Vue.js可以说是MVVM架构的最佳实践,是一个JavaScript MVVM库,是一套构建用户界面的渐进式前端框架.专注于MVVM中的ViewModel,不仅做到了数据双向绑定,而 ...
1.vue简介以及模板语法---vue教程
1. vue简介 vue的组件化后缀名为.vue的文件是vue.js特有文件格式,表示一个vue组件 ,即单页式组件,可承载视图模板-,"样式定义"- 2.vue扩展插件 vue ...
Vue第一部分(1)：Vue简介以及第一个示例
Vue简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的JavaScript框架.封装了原生的DOM操作,无需进行任何手动的DOM编码即可完成页面数据的渲染. MVVM模 ...
vue 简介 el 挂载点 data 数据
目录标题 vue简介 vue案例 el 挂载点 data 数据 vue简介 vue案例 <div id="app">{{ message }}</div>& ...
【Vue】Vue全家桶（一）Vue基础
文章目录 1 Vue概述 1.1 vue简介 1.2 vue特点 1.3 Vue 扩展插件 2 Vue的基本使用 2.1 传统开发模式对比 2.2 引入Vue.js的方法 2.3 Vue.js案例分析 ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
Vue简介及HelloWord编写
简介 Vue是一套用于构建用户界面的渐进式JavaScript框架,何为渐进式,主要是自底向上逐层应用,并且简单应用可以使用核心库便可完成,如果需要复杂地应用,需要引入一些Vue插件库,这就达到渐进式 ...
vue数据管理系统项目说明文档
git 地址 vue数据管理系统项目地址说明文档 1. 题目实现一张数据管理表格,包含以下字段,实现其增删改查和查看.id 头像姓名性别手机号邮箱个人简介密码 2. 角色分配管理员 ...
vue 简介（MVVM介绍，超详细）
目录 vue 简介 1. 什么是 vue 1.1 解读核心关键词:构建用户界面 1.2 构建用户界面的传统方式 1.3 使用 vue 构建用户界面 1.4 解读核心关键词:框架 1.5 总结:什么是 ...

vue 简介 vue 项目

vue 简介 vue 项目相关推荐

最新文章

热门文章