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 ...
随机推荐
- react 使用 redux 的时候 用 ref获取子组件的state
由于 redux是无状态的,所以当我们在子组件中使用了 redux的时候,再父组件中,使用 ref 来获取子组件的state时,发现为一个空对象. 其实这个是有解决方案法的,原因在于 我们使用的 r ...
- 关于Stuck Archiver的疑问
客户使用crsctl stat res -t命令去查看RAC集群状态时,发现异常,知晓Stuck Archiver代表归档满,问我们为什么RAC是同一个库,只有实例1显示Stuck Archiver, ...
- echo 内容显示颜色
一,字体显示颜色 #字体颜色:30m-37m 黑.红.绿.黄.蓝.紫.青.白str=”要显示的字体“echo -e "\033[30m ${str}\033[0m" ## ...
- Ajax技术之使用XMLHttpRequest对象（一）【初始化XMLHttpRequest对象】
在初始化XMLHttpRequest对象时要考虑两种情况,一种是IE浏览器,另一种是非IE浏览器.在IE浏览器中要把XMLHttpRequest实例化一个ActiveX对象 http_request ...
- schame定义及用处
一.schame详解 http://www.cnblogs.com/Neo-ds/p/4790413.html 1.先明确一点,SQL Server中模式(schema)这个概念是在2005的版本里才 ...
- Lua之table
Lua table(表) 参考:http://www.runoob.com/lua/lua-tables.html table 是 Lua 的一种数据结构用来帮助我们创建不同的数据类型,如:数字.字典 ...
- <8>Lua继承
模拟继承方式 代码: --继承 -- 基类:Person local Person = {} --基类的表 -- 方法 function Person:test() print("Perso ...
- Lua数据类型
[1]Lua数据类型 Lua语言共有8种基本类型 [1] nil 空.最简单,有且仅有值nil,表示一个无效值(在条件表达式中相当于false) [2] boolean 布尔.包含两个值:false和 ...
- redis相关问题
什么是Redis?Redis 是一个使用 C 语言写成的,开源的 key-value 数据库..和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表 ...
- foreach 语句
foreach 语句很适合用来枚举 如数组.列表.集合之类的数据结构中的元素. 不必准确知道元素个数.如果基数据不包含任何元素,则foreach循环不执行 foreach(<元素> ...