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 ...
随机推荐
- PHP数据库环境配置
wamp环境 w是windows系统 a是Apache(服务器管理软件) m是MySQL(数据库) p是PHP wamp正常情况下是绿色的可以正常使用 黄色和红色不能使 ...
- SQLAllocHandle
函数定义: 顾名思义,该函数就是用来分配句柄的,句柄类型参考参数详解. SQLRETURN SQLAllocHandle( SQLSMALLINT HandleType, SQLHANDLE ...
- discuz用户组
非公众用户组当用户组设置为“非公众用户组”时,无论是以主用户组的形式,还是以扩展用户组的形式,均只能由管理员手工将用户加入本组. 公众用户组当本用户组设置为“公众用户组”,且用户当前所在的用户组被允许 ...
- 【转】查看sqlserver被锁的表以及如何解锁
查看被锁表: select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys. ...
- Jmeter自己jar包的引用
1.编写清空指定文件夹里所有内容的jar包 package org.na;import java.io.File;public class deletedir { public static b ...
- 102.自己实现ArrayList
package collection; import java.util.ArrayList; import java.util.List; /** * 自己实现一个ArrayList,帮助理解底层结 ...
- 计蒜客---N的-2进制表示
对于十进制整数N,试求其-2进制表示. 例如,因为 1*1 + 1*-2 + 1*4 + 0*-8 +1*16 + 1*-32 = -13 ,所以(-13)_10 = ( ...
- <转>jmeter（六）元件的作用域与执行顺序
本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...
- 关于spark进行实时日志解析，保存hbase与mysql
进行地域分析 rowkey=中国_上海_201901016 value=访问次数 areaStartAmt.foreachRDD(rdd => { rdd.foreachPartition(pa ...
- 前端框架VUE----指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...