vue 起步
vue 官网
目前最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么高的评价的vue.js，也是开源世界华人的骄傲，因为它的作者是位中国人–尤雨溪（Evan You）。
Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
vue 官网：https://cn.vuejs.org/
vue 学习手册：https://cn.vuejs.org/v2/guide/index.html
实现 hello world 程序编辑
vue 不支持 IE8 及以下版本，因为 vue 是用来 IE8 无法模拟的 ECMAScript5 特性，但是它支持所有 ECMAScript5 的浏览器。
vue.js 开发版本地址：https://vuejs.org/js/vue.js
目录结构：
原生 js 写法：
index.html
<!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>Hello World</title>
</head>
<body>
<div id="app"></div> <script>
var dom = document.getElementById("app");
dom.innerHTML = "hello world"
</script>
</body>
</html>
使用 vue.js 编写：
<!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>Hello World</title>
<!-- 引入 vue.js 库文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 调用 data 中的 content 对应的数据 -->
<div id="app">{{content}}</div> <script>
// 实例化一个vue实例
var app = new Vue({
el:'#app', // 配置项，表示实例负责管理的区域，指id=app的div标签。
data:{
content:"Hello World"
}
})
</script>
</body>
</html>
文字两秒钟后动态变换
原始js
<!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>Hello World</title>
<!-- 引入 vue.js 库文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app"></div> <script>
var dom = document.getElementById("app")
dom.innerHTML="hello world" setTimeout(() => {
dom.innerHTML="by world"
}, 2000); </script>
</body>
</html>
vue.js
<!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>Hello World</title>
<!-- 引入 vue.js 库文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 调用 data 中的 content 对应的数据 -->
<div id="app">{{content}}</div> <script> // 实例化一个vue实例
var app = new Vue({
el:'#app', // 配置项，表示实例负责管理的区域，指id=app的div标签。
data:{
content:"Hello World"
}
}) setTimeout(() => {
app.$data.content="by world"
}, 2000); </script>
</body>
</html>
使用 Vue.js 实现 TodoList
通过 input 框，想已有列表项中添加一条信息。
<!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>ToDoList</title>
<!-- 引入库文件 -->
<script src="./vue.js"></script>
</head> <body>
<div id="app">
<!-- v-model 数据-双向绑定 -->
<input type="text" v-model="inputValue">
<!-- v-on vue中用来绑定事件 -->
<button v-on:click="handleBtnClick">提交</button>
<ul> <!-- <li>第一课的内容</li>
<li>第二课的内容</li> --> <!-- v-for 用来循环 -->
<li v-for="item in list">{{item}}</li> </ul> </div> <script>
// 创建一个示例
var app = new Vue({
el: '#app',
// data 用于数据绑定
data: {
// 用于存储数据
list: [],
// 用于与输入框数据-双向绑定
inputValue: '',
},
// 用于构造方法
methods: {
// 提交事件
handleBtnClick: function () {
// 获取 input 框内容.
// alert(this.inputValue) // push 向集合list添加数据
this.list.push(this.inputValue)
// 清空输入框
this.inputValue = ''
}
}
}) </script> </body> </html>
添加事件：v-on:click="handleBtnClick"
数据绑定：v-model="inputValue"
数据循环输出：v-for="item in list"
MVVM 模式
一般前端设计的 MVP 模式
M：模型层
V：视图层
P：控制层
VUE 的 MVVM 模式
M：模型层
V：视图层
VM：ViewModel 层
总结：以前使用 jQuery 编辑代码的时候主要是使用MVP面向于DOM进行开发，而现在使用MVVM开发的过程中是面向数据进行开发编程。
前段组件化
组件，是个人页面的一部分。分成多个组件，可以将一个大型的项目按照拼积木的方式搭建起来。一个项目很庞大，但是将这个大项目划分成很多组件，使得每个组件很精小，有利于开发和维护。
记住一点，每一个组件其实就是页面上的一个区域。
通过组件化，优化 ToDOList 功能
<!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>ToDoList</title>
<!-- 引入库文件 -->
<script src="./vue.js"></script>
</head> <body>
<div id="app">
<!-- v-model 数据-双向绑定 -->
<input type="text" v-model="inputValue">
<!-- v-on vue中用来绑定事件 -->
<button v-on:click="handleBtnClick">提交</button>
<ul> <!-- <li>第一课的内容</li>
<li>第二课的内容</li> --> <!-- v-for 用来循环 -->
<!-- <li v-for="item in list">{{item}}</li> --> <!-- 与TodoItem绑定 -->
<!-- v-bind通过变量content将item传给TodoItem子组件 -->
<todo-item v-bind:content="item" v-for="item in list"></todo-item> </ul> </div> <script>
// 创建全局组件,名字叫做TodoItem，内容是li标签。全局组件不需要在vue示例中注册
// Vue.component("TodoItem", {
// // 接受前段绑定的content数据
// props: ['content'],
// template: "<li>{{ content }} </li>",
// }) // 局部组件,在示例中必须被注册，全局组件不需要
var TodoItem = {
// props是指外部传递回来的数据
props: ['content'],
template: "<li>{{ content }}</li>",
} // 创建一个示例
var app = new Vue({
el: '#app',
// 将局部组件注册到示例中。
components: {
TodoItem: TodoItem,
},
// data 用于数据绑定
data: {
// 用于存储数据
list: [],
// 用于与输入框数据-双向绑定
inputValue: '',
},
// 用于构造方法
methods: {
// 提交事件
handleBtnClick: function () {
// 获取 input 框内容.
// alert(this.inputValue) // push 向集合list添加数据
this.list.push(this.inputValue)
// 清空输入框
this.inputValue = ''
}
}
}) </script> </body> </html>
组件间传值
父子组件传值问题，案例，在 ToDoList 案例中添加，点击列项删除功能。
<!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>ToDoList</title>
<!-- 引入库文件 -->
<script src="./vue.js"></script>
</head> <body>
<div id="app">
<!-- v-model 数据-双向绑定 -->
<input type="text" v-model="inputValue">
<!-- v-on vue中用来绑定事件 -->
<button v-on:click="handleBtnClick">提交</button>
<ul> <todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleItemDelete"> </todo-item> </ul> </div> <script> var TodoItem = {
props: ['content','index'],
// @click= 等同于 v-on:oclick=,方法写在子组件方法当中。
template: "<li @click='handleItemClick'>{{ content }}</li>",
methods: {
// 子组件点击方法
handleItemClick: function () {
//当子组件按下，向外触发一个事件。
this.$emit("delete",this.index)
}
}
} // 创建一个示例
var app = new Vue({
el: '#app',
// 将局部组件注册到示例中。
components: {
TodoItem: TodoItem,
},
// data 用于数据绑定
data: {
// 用于存储数据
list: [],
// 用于与输入框数据-双向绑定
inputValue: '',
},
// 用于构造方法
methods: {
// 提交事件
handleBtnClick: function () {
// 获取 input 框内容.
// alert(this.inputValue) // push 向集合list添加数据
this.list.push(this.inputValue)
// 清空输入框
this.inputValue = ''
},
// 父组件删除选项,index为列表元素的下标
handleItemDelete: function (index) {
// 从传进的下标位置开始删除一项。
this.list.splice(index,1)
}
}
}) </script> </body> </html>
@click= 等同于 v-on:oclick=
:content= 等同于 v-bind:content=
vue 起步的更多相关文章
- Vue起步
Vue起步 Vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式javascript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- vue 起步走 --“安装篇”
在说明之前,溶解得在这说一句 ,菜鸟开始安装这些东西真是不容易,各种疯狂的百度,搜索.(找的我眼泪都快流下来了),不说废话,开始正经. 第一步:环境的搭建 : vue推荐开发环境: Node.js: ...
- 初识vue——起步
一.目录结构: 我们经常使用的是以下几个目录: 1.assets:静态资产文件:在vue组件中,所有组件中,所有模板和CSS都会被vue-html-loader和css-loader解析,并查找资源u ...
- vue起步和模板語法
vue構造器里有哪些內容: var a=new Vue({}) 模板語法: 文本插值: html: html的屬性里的值應該使用v-bind: 表達式: 指令; 參數:v-bind,v-on 雙向用戶 ...
- vue 起步_code
<template> <div class="hello"> <h1>{{ msg }}</h1> <div>{{dat ...
- 【Vue起步-Windows】N01：环境安装
本文基于“vue.js安装过程(npm安装)”文章内容及个人出现的问题整合而成. 1.安装npm环境 在Node官网中下载最新的windows版msi安装包,并默认所有安装选择. 2.查看npm安装版 ...
- webpack+vue起步
本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vue2.x踩坑与总结Webpack2.x踩坑与总结 记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译v ...
- vue 起步（一）
准备 安装nodejs(下载),Windows 安装包(.msi) npm相关 打开cmd查看npm版本, npm -v,如果没有安装npm,执行npm install npm -g进行安装 查询当前 ...
- 第二章、 Vue 起步
2-2.编写hello world 首先创建vue实例,然后实例接收一些配置项,el表示实例负责管理的区域,data表示区域内的数据 两秒后内容变为bye world 其中app表示实例对象,$dat ...
随机推荐
- iOS 元件组件-创建静态库static library
概述 在项目开发的过程中,经常使用静态库文件.例如两个公司之间业务交流,不可能把源代码都发送给另一个公司,这时候将私密内容打包成静态库,别人只能调用接口,而不能知道其中实现的细节. 库是一些没有mai ...
- 记录一则ORA-600 [13011]错误
环境:Solaris 10 + Oracle 11.2.0.1 现象:alert告警日志定期出现ORA-600 [13011]错误 1.故障现象 2.初步分析 3.匹配MOS 4.定位解决 1.故障现 ...
- time_t time()
time_t atime, btime; time(&atime); btime = time(0); 两种方式效果一样.
- 合并dict、list的方法
dict1={1:[1,11,111],2:[2,22,222]}dict2={3:[3,33,333],4:[4,44,444]}合并两个字典得到类似 {1:[1,11,111],2:[2,22,2 ...
- sqlserver 用一个表的值 更新另一个表
update cas set cas.DocumentHeaderIdOfTransferredForForm = apply.Id from dbo.CaseTransfer cas join db ...
- sql server2012 远程访问设置（转）
转自:http://blog.csdn.net/xiadingling/article/details/8215282 步骤 打开SQL server2012,使用windows身份登录 登录后, ...
- [3]传奇3服务器源码分析一 DBServer
留存 服务端下载地址: 点击这里
- 如何修改Xampp服务器上的mysql密码(图解)
https://www.jb51.net/article/111289.htm https://www.cnblogs.com/Leequik/p/5323795.html 1.点击MySQL的adm ...
- 【转】推荐4个不错的Python自动化测试框架
之前,开发团队接手一个项目并开始开发时,除了项目模块的实际开发之外,他们不得不为这个项目构建一个自动化测试框架.一个测试框架应该具有最佳的测试用例.假设(assumptions).脚本和技术来运行每一 ...
- 【2017-03-10】T-sql基础语句及条件，高级查询
一.T-sql基础语句 1.创建数据库:create database 数据库名 (不能中文,不能数字开头,不能符号开头) 2.删除数据库:drop database 数据库名 3.选择数据库:us ...