<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data:{
message:"hello vue "
}
})
</script>
</body>
</html>
显示 hello vue
在控制台改变
或者通过:
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>
你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息‘，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
我们惊讶地发现，改变JavaScript对象的状态，会导致DOM结构作出对应的变化！这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态，而操作JavaScript对象比DOM简单多了！
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
<p v-else>现在你没看到我</p>
<p v-if="seen">现在你看到我了</p>
<p v-else-if="seen===‘a‘">现在你看到a</p>
<p v-else>aaaaa</p>
</div>
<script type="text/javascript">
var app3 = new Vue({
el: ‘#app-3‘,
data: {
seen: true
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<ul id="id1">
<li v-for="item in iteams">
{{item.message}}
</li>
</ul>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data:{
iteams:[
{message:"space1"},
{message:"space2"},
{message:"space3"}
]
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">
<button v-on:click="saihello" >clock me</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data: {
message: "space1"
},
methods:{
saihello:function () {
alert(this.message)
}
}
})
</script>
</body>
</html>
学习vue我们必须之到它的7个属性，8个 方法，以及7个指令。787原则
el属性
data属性
template属性
methods属性
render属性
computed属性
watch属性
在vue中，定义data可以有三种写法。
1.第一种写法，对象。
var app = new Vue({
el: ‘#yanggb‘,
data: {
yanggb: ‘yanggb‘
}
})
2.第二种写法，函数。
var app = new Vue({
el: ‘#yanggb‘,
data: function() {
return {
yanggb: ‘yanggb‘
}
}
})
3.第三种写法，函数，是第二种写法的ES6写法。
var app = new Vue({
el: ‘#yanggb‘,
data() {
return {
yanggb: ‘yanggb‘
}
}
})
三种写法的区别
在简单的vue实例应用中，三种写法几乎是没有什么区别的，因为你定义的#yanggb对象不会被复用。
但是如果是在组件应用的环境中，就可能会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个data对象，只能返回函数。这个与JavaScript的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况。
UI控件上,表单的input ,selected上创建双向数据流通.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">
请输入：<input type="text" value="123" v-model="message"/> {{message}}
<br>
<input type="radio" name="sex" value="male" v-model="sex1" checked>Male
<br>
<input type="radio" name="sex" value="female" v-model="sex1" >Female
<br>
{{sex1}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data: {
message: "space1",
sex1:""
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<ul id="id1">
//使用模板,传递参数给模板
<diy1 v-for="item in items" v-bind:qin="item"></diy1>
</ul>
<script type="text/javascript">
// 创建组件
Vue.component("diy1",{
props:[‘qin‘],
template:" <li>{{qin}}</li>"
})
var app = new Vue({
el:"#id1",
data: {
items:["java","python","c++"]
}
})
</script>
</body>
</html>
通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
Vue.component(‘my-component-name‘, {
// ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
到目前为止，关于组件注册你需要了解的就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Vue基于 关注度分离 专注于视图层，少用jquery，频繁操作DOM树。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
<div>{{info.name}}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data(){
//请求返回的数据,必须和json字符串一样
return{
info:{
name:"",
url: "",
page: "",
isNonProfit:"",
}
}
},
//进行网络通信,底部实现是ajax
mounted(){
//钩子函数
axios.get("./data.json").then(response=>(this.info=response.data))
}
})
</script>
</body>
</html>
1，beforeCreate（）：此钩子函数发生在实例创建之前，此时data，el，methods未初始化，观测数据和事件初始化完成，
2，created（）：此钩子函数data，methods数据初始化；el未初始化
3，beforemount（）：此钩子函数内就运用了dom虚拟技术 即是先占位置 数据不更新 （操作dom时拿不到数据），el未初始化完成
4：mounted（）：实例挂载完成，
5：beforeupdate（）：此函数发生在视图dom数据更新之前，dom虚拟和下载补丁之前，即data更新 当操作dom时拿不到数据，
6：updated（）：视图更新完成，
7：beforedestory（）：此时实例仍未销毁，this可以使用
8：destoryed（）：实例销毁完成，
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
中文版：
计算属性=把计算出来的值，保存在属性里面，在内存中运行，虚拟DOM，想象成缓存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
fun1:{{data1()}}
<br>
fun2:{{data2}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data: {
message:"aaaa"
},
methods: {
data1:function () {
return Date()
}
},
computed:{
data2:function () {
this.message;
return Date()
}
}
})
</script>
</body>
</html>
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 [Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。
就是在页面里面预留 位置 ，提前规划好位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
<slot1>
<title2 slot="title" v-bind:title1="messgae"></title2>
<lis slot="lis" v-for=" i in items " v-bind:item="i"></lis>
</slot1>
</div>
<script type="text/javascript">
//插槽
Vue.component(‘slot1‘,{
template:" <div> <slot name=‘title‘></slot> <ul> <slot name=‘lis‘></slot> </ul> </div>"
})
Vue.component(‘title2‘,{
props: [‘title1‘],
template: ‘<div>{{title1}}</div>‘
});
Vue.component(‘lis‘,{
props: [‘item‘],
template:"<li>{{item}}</li>"
});
var app = new Vue({
el: "#id1",
data:{
messgae:"书籍列表",
items:["java","c++","python"]
}
});
</script>
</body>
</html>
<!-- v-on:remove="removelist(index)" 自定义事件remove-->
this.$emit("remove",index) 通过这个把组件的函数 映射到自定义事件上，调用自定义事件的函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
<slot1>
<title2 slot="title" v-bind:title1="messgae"></title2>
<lis slot="lis" v-for=" (i, index) in items" v-bind:item="i" v-bind:index1="index"
v-on:remove="removelist(index)" v-bind:key="index" >
</lis>
</slot1>
</div>
<script type="text/javascript">
//插槽
Vue.component(‘slot1‘,{
template:" <div> <slot name=‘title‘></slot> <ul> <slot name=‘lis‘></slot> </ul> </div>"
})
Vue.component(‘title2‘,{
props: [‘title1‘],
template: ‘<div>{{title1}}</div>‘
});
Vue.component(‘lis‘,{
props: [‘item‘,"index"],
template:"<li>-- {{index}} ----{{item}} <button v-on:click=‘remove‘>删除</button></li>",
methods:{
// this.$emit("remove",index1)
remove:function (index) {
this.$emit("remove",index)
}
}
});
var app = new Vue({
el: "#id1",
data:{
messgae:"书籍列表",
items:["java","c++","python"]
},
methods: {
//index表示下标
removelist:function (index1) {
console.log("删除了"+this.items[index1]+"---------")
this.items.splice(index1,1)
}
}
});
</script>
</body>
</html>
Vue的开发都是基于NodeJS，实际开发采用vue-cli,vue-route路由,vuex做状态管理,VueUI ，界面一般使用ElementUI(饿了吗)，或者ICE(阿里巴巴)
vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本。
index 会自动加载 main.js 给他的 模板,main.js的模板来自App.vue
nodejs(官网下载)
git
node -v
npm -v
//淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
1. 需要更改一个安装路径
npm config set registry "http://registry.npmjs.org/"
2. 再次使用npm进行全局安装cnpm
npm install -g cnpm
3.输入cnpm -v 即可出现版本号
cnpm install -g vue-cli
vue list
//查看可以基于那些模板进行创建，通常我们使用webpack
vue init webpack myVue
? Project name myvue
? Project description A Vue.js project
? Author helloWorld
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no
//进入项目,安装依赖
npm install
//启动项目
npm run dev
Your application is running here: http://localhost:8080
本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack它是代码编译工具，有入口，出口、loader和插件
最原始的js加载方式,
<script src="" ></script>
每一个文件看做一个模块，那么他们的接口暴露在全局作用域下。
弊端
<script>书写的顺序进行加载CommonJS是一种被广泛使用的js模块化规范，核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。
采用 CommonJS 导入及导出的代码如下：
//导入
const moduleA = require ( ’. / moduleA’);
//导出
module .exports = moduleA.someFunc;
? Asynchronous Module Definition，即异步模块加载机制
? 作为一个规范，只需定义其语法API，而不关心其实现。AMD规范简单到只有一个API，即define函数：
(Common Module Definition)通用模块定义，它解决的问题和AMD规范是一样的，只不过在模块定义方式和模块加载时机上不同，CMD也需要额外的引入第三方的库文件，SeaJS
是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1]
安装：
cnpm install webpack -g
cnpm install webpack-cli -g
测试:
D:\Code\myvue\myVue>webpack -v
4.44.1
D:\Code\myvue\myVue>webpack-cli -v
3.3.12
Webpack 最关键的就是 webpack.config.js 配置文件，架构的好坏都体现在这个配置文件中。
1.创建一个文件夹
2.创建一个 module 目录，用于放置JS模块等资源文件
3.在module创建hello.js文件，编写js模块代码
"user strict"
//暴露一个方法
exports.sayHi=function () {
document.write("<div>我在学前端</div>")
}
4.在module创建main.js文件,作为入口文件,
"user strict"
//require 映入模块
var hello = require("./hello");
hello.sayHi()
5.创建配置文件webpack..conf.js，使用webpack打包
? 设置入口，出口
"use strict"
var path = require(‘path‘);
module.exports = { //注意这里是exports不是export
entry: "./module/index.js", //入口文件
output: { //输出文件
path: path.resolve(__dirname,‘dist‘), //输出文件的目录
filename: ‘bundle.js‘ //输出文件的名称
}
}
6.创建HTML文件，引入打包后的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
结果：
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
基于vue-cli创建的项目,进入项目后进行安装vue-router插件
cnpm install vue-router --save-dev //安装到开发环境
在模块进行使用 ,必须通过Vue.use()进行加载
import VueRouter from "vue-router";
//安装路由
Vue.use(VueRouter)
Context.vue
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Context"
}
</script>
<style scoped>
</style>
Main.vue
<template>
<h1>主页</h1>
</template>
<script>
export default {
name: "Index"
}
</script>
<style scoped>
</style>
在src下创建route目录，创建index.js
index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Context from "../components/Context";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter)
//配置路由
export default new VueRouter({
//注册路由
routes:[
{
//路径
path:"/context",
//名称
name:"context",
//组件
component:Context
},
{
//路径
path:"/main",
//名称
name:"main",
//组件
component:Main
}
]
})
在main.js入口文件注册
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import Router from ‘./route/index‘
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
components: { App },
template: ‘<App/>‘,
//注册全部路由
router:Router
})
原文：https://www.cnblogs.com/firsthelloworld/p/13462976.html