目录
1. Vue.js是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
我理解的意思是Vue是一个构建用户界面(UI)的[渐进式JavaScript框架
下载官网：https://cn.vuejs.org/
1.2 ,什么是渐进式框架？
其实就是框架分层。那是如何分层的呢最核心的是视图层渲染，然后往外是组件机制，在此基础上再加入路由机制，再加入状态管理，最外层是构建工具，vue和react都是如此。
2.安装Vue以及环境配置
他分为两种下载方式,两种下载又包含了两种版本一种是开发环境，一种是生产环境
2.1 cdn下载(需连接网络)
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--------------------------------------------------------------------------------------------------------
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.2 手动下载
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="dist/vue.js"></script>--------------------------------------------------------------------------------------------------------
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="dist/vue.min.js"></script>
2.3 .这边直接安 装：https://cn.vuejs.org/v2/guide/installation.html =》点击开发版本
2.4 CDN
手动下载可以理解但是CDN是什么意思？其实CDN就是加速
什么是CDN加速？
CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，
使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术
CDN概况
CDN的全称是Content Delivery Network，即内容分发网络。
CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。
CDN加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源，这是核心。
CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备
CDN基本原理：将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。
2.5 给HTML元素即视图添加id属性
<!-- 指定vue管理内容区域，通常我们也把它叫做
边界，这意味着我们接下来的改动全部在指定的div内，
div外部不受影响 -->
<div id="app">
<h1>{{title}}----{{ts}}</h1>
<!--
1) javascript:
window.addListener
<button onclick="onclick="return confirm('wwwwww')"">安</button>
2）jquery:
$('选择器')。bind('click',function(){})
-->
<button v-on:click="doClick">有种点我</button>
</div>2.6.Vue实例，并搭建Vue环境
每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的<!-- 指定vue管理内容区域，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部不受影响 -->
<div id="d1">{{message}}</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 开发:开发环境版本，包含了有帮助的命令行警告 -->
<!--生产: 生产环境版本，优化了尺寸和速度 -->
<!--1.手动方式-->
<!-- <script src="js/vue.js" type="text/jscript"></script>-->
<!--2.cdn下载(需连接网络)-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<body>
{{title}}
<!-- 指定vue管理内容区域，通常我们也把它叫做
边界，这意味着我们接下来的改动全部在指定的div内，
div外部不受影响 -->
<div id="app">
<h1>{{title}}----{{ts}}</h1>
<!--
1) javascript:
window.addListener
<button onclick="onclick="return confirm('wwwwww')"">安</button>
2）jquery:
$('选择器')。bind('click',function(){})
-->
<button v-on:click="doClick">点我</button>
</div>
</body>
<script>
//每个Vue实例都是从new构造函数开始
//每个Vue实例都是从new构造函数开始
//每个Vue实例都是从new构造函数开始
var vm=new Vue({
el:'#app', // DOM 元素，挂载视图模型(element,管理边界)，
//方式1
/* data:{ // 定义属性，并设置初始值
title:'Hello Vue!!!',
ts:new Date().getTime()
}, */
//方式2函数方式(data在组件开发中的写法必须是一个函数)
data:function(){ // 定义属性，并设置初始值
return{
title:'Hello Vue!!!',
ts:new Date().getTime()
}
},
methods:{ // 定义方法，用于事件交互时使用的函数
doClick:function(){
alert('hello vue!!');
},
doRegister(){
}
}
});
</script>
</html>2.7.注意事项
注1：data在组件开发中的写法必须是一个函数
注2：vue指令：指的是是带有“v-”前缀的特殊属性
注3：用v-on:click指令绑定单击事件注4 var vm = new Vue({
el：'#ID' // DOM 元素，挂载视图模型，
data：{}, // 定义属性，并设置初始值
methods：{} // 定义方法，用于事件交互时使用的函数
});
3.指令
7.1、什么是指令
指令是一个带有v-前缀的特殊属性，那么指令的本质就是自定义属性指令的格式，以v-开头
指令可带参数，也可不带参数，比如v-cloak指令就属于无参数的指令
7.2双向数据绑定(Vue two way data binding)
示例1： 数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化
示例2： 只有当实例被创建时data中存在的属性才是响应式的
示例3：用v-model指令在表单控件元素上创建双向数据绑定
示例4： this在methods属性的方法里指向当前Vue实例
vm.name/vm.$data.name(外部访问)
this.name(内部访问)示例5：用v-once指令进行单向绑定，一般不用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 开发:开发环境版本，包含了有帮助的命令行警告 -->
<!--生产: 生产环境版本，优化了尺寸和速度 -->
<!--1.手动方式-->
<!-- <script src="js/vue.js" type="text/jscript"></script>-->
<!--2.cdn下载(需连接网络)-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<body>
<div id="app">
<h1>{{ts}}</h1>
<!-- 示例1 数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化-->
<input type="text" v-model="num"/>
<button v-on:click="doKeyup">提交</button>
<!--示例2. 只有当实例被创建时data中存在的属性才是响应式的 -->
{{name}}
<!-- 用v-model指令在表单控件元素上创建双向数据绑定 -->
<input type="text" v-model="num"/><button v-on:click="tj">+++</button>
<!-- 示例5 v-once -->
<span v-once>{{num}}</span>
</div>
</body>
<script>
var vm=new Vue({
el:'#app', // DOM 元素，挂载视图模型(element,管理边界)，
data:function(){ // 定义属性，并设置初始值
return{
title:'Hello Vue!!!',
ts:new Date().getTime(),
num:10,
name:'ii'
}
},
methods:{ // 定义方法，用于事件交互时使用的函数
doKeyup:function(){
console.log(this.num);
},
tj:function(){
/* 示例3：用v-model指令在表单控件元素上创建双向数据绑定 */
this.num=parseInt(this.num)+1;
console.log(this.num);
/* 示例4： this在methods属性的方法里指向当前Vue实例
vm.name/vm.$data.name(外部访问)
this.name(内部访问) */
console.log("num=%d,name=%s",this.num,this.name);
}
}
});
vm.name="zs";
</script>
</html>注1：console对象可以使用printf风格的占位符。只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种
注2：Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
