认识Vue
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
js中的ECMA5与ECMA6
- ECMA是欧洲计算机协会的缩写，E5和E6推出了许多新功能。
var、let、const的区别：
var是全局变量，无论是在哪个位置，都可以使用，像类中的实例变量；
let是局部变量，只能在方法内部使用，像java中方法的局部变量；
const是最终的，一旦赋值初始值，就不可以改变，像java中的static final；
解构表达式：
- 定义一个整型数组，进行操作:
let arr = [23,78,65,42,98];
需求1，取出第一个元素和第二个元素：
let a = arr[0],b= arr[1];
需求2，取出除了第一个元素的其他元素：
let [,…rest] = arr;
- 定义一个json格式的数据：
let p = {name:“steven”,age:21};
需求1，取出name和age,第一种：
let {name,age} = p;
需求1，取出name和age,第二种(不想使用原有的名称)：
let {name:a,age:ag} = p;
let p = {name:“steven”,age:21,girl:{name:“xielan”,age:22}};
需求，取出girl数组中的内容：
let {girl:{name:n,age:a}} = p;
案例:
function sum(a,b){
return a+b;
}
const add = (a,b) => a + b;
const p = {
name:"Jack",
age:21
};
const hello = function(person){
console.log(person.name+" "+person.age);
}
const hello2 = function({name,age}){
console.log(name+" "+age);
}
hello(p);
hello2(p);
map和reduce
let s = ["21","37","46"];
let arr2 = s.map(arr => parseInt(arr));//map是将一个个元素进行拆分
arr2.reduce((a,b) => a + b);//reduce是将拆分的结果按照指定的格式进行合并
arr2.reduce((a,b) => a * b,0);//reduce是将拆分的结果按照指定的格式进行合并，并将第一个元素置为0
-- reduce是将第一个元素和第二个元素进行逻辑运算，第二次进来时，将第一次运算的结果作为第一个参数，第三个参数作为第二个参数，以此类推...
安装npm、nrm
- 1、下载node.js
点击网址: https://nodejs.org/en/，下载windows的msi版本;
- 2、下载安装之后，在控制台输入node -v命令：
- 3、Node自带了NPM了，在控制台输入npm -v查看
- npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm
我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间
npm install nrm -g
- 然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库
- 通过nrm use taobao来指定要使用的镜像源
- 然后通过nrm test npm来测试速度
创建工程，使用vue
- 1、通过npm对工程中加入vue
进入hello-vue目录，先输入：npm init -y 进行初始化
- 2、安装Vue
输入命令：npm install vue --save
vue声明式渲染
<body>
<div id="app">
<h2>{{name}}，非常帅！！！</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 创建vue实例
var app = new Vue({
el:"#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "峰哥"
}
});
</script>
- 首先通过 new Vue()来创建Vue实例
- 然后构造函数接收一个对象，对象中有一些属性：
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
- name：这里我们指定了一个name属性
- 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。
双向绑定使用v-model指令
事件处理
-- 也可以使用@click，可以直接写js代码，也可调用已经写好的js代码
<button v-on:click="num++">点我</button>
<button v-on:click="add">点我</button>
-- js
var vm = new Vue({
el:"#app",
data:{
num: 0
},
methods:{
add:function(){
// this代表的当前vue实例
this.num++;
}
}，
created: function () {//vue初始化时就会执行的函数
this.num = 100;
}
})；
vue指令
1.1 插值表达式:{{}}，两个花括号包在中间的内容；
1.2 插值闪烁，用v-text、v-html代替：
-
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
-
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
HTML: <div id="app"> v-text:<span v-text="hello"></span> <br/> v-html:<span v-html="hello"></span> <input type="checkbox" v-model="language" value="Java" />Java<br/> <input type="checkbox" v-model="language" value="PHP" />PHP<br/> <input type="checkbox" v-model="language" value="Swift" />Swift<br/> <h1> 你选择了：{{language.join(',')}} </h1> </div> JS: var vm = new Vue({ el:"#app", data:{ hello: "<h1>大家好，我是峰哥</h1>", language:[] } })
v-on
语法:v-on:事件名=“js片段或函数名”
事件绑定可以简写，例如v-on:click='add’可以简写为@click=‘add’;
v-for
语法:v-for=“item in items”
- items：要遍历的数组，需要在vue的data中定义好。
- item：迭代得到的数组元素的别名
数组角标
语法:v-for="(item,index) in items"
- items：要迭代的数组
- item：迭代得到的数组元素别名
- index：迭代到的当前元素索引，从0开始。
遍历对象
语法:
v-for=“value in object”
v-for="(value,key) in object"
v-for="(value,key,index) in object"
- 1个参数时，得到的是对象的属性
- 2个参数时，第一个是属性，第二个是键
- 3个参数时，第三个是索引，从0开始
v-if、v-show
<button @click="random = Math.random()">点我呀</button><span>{{random}}</span>
<h1 v-if="random > 0.75">
看到我啦？if 0.75
</h1>
<h1 v-else-if="random > 0.5">
看到我啦？if 0.5
</h1>
<h1 v-else-if="random > 0.25">
看到我啦？if 0.25
</h1>
<h1 v-else>
看到我啦？else
</h1>
- v-if,v-else-if,v-else代码之间不能写入其他代码；
- v-if是直接将代码去除，v-show是将代码片段的display置为none；
计算属性
<h1>您的生日是：{{
new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
}}
</h1>
var vm = new Vue({
el:"#app",
data:{
birthday:1429032123201 // 毫秒值
},
computed:{
birth(){// 计算属性本质是一个方法，但是必须返回结果
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
<div id="app">
<h1>您的生日是：{{birth}} </h1>
</div>
watch实时监控
-
watch可以让我们监控一个值的变化。从而做出相应的反应。
<div id="app"> <input type="text" v-model="message"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ message:"", person:{name:"余海",age:23} }, watch:{ message(newVal, oldVal){ console.log(newVal, oldVal); }, person:{ deep:true,//监控对象需开启深度监控 handler(val){//对象监控的方法名称必须是handler console.log(val.age); } } } }) </script>
全局组件与局部组件
<head>
<meta charset="UTF-8">
<title>组件化</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
</div>
</body>
<script type="text/javascript">
/*//定义全局组件
Vue.component('counter',{//全局组件，组件名称为counter
template : "<button v-on:click='count ++'>你点了我{{count}}次</button>",
data(){
return {
count : 0
}
}
});*/
//定义局部组件
const counter = {
template : "<button v-on:click='count ++'>你点了我{{count}}次</button>",
data() {
return {
count: 0
}
}
};
var app = new Vue({
el : "#app",
data:{
},
components:{
counter//局部组件需要在此进行注册
}
});
</script>
</head>
当我们定义这个 < counter > 组件时，它的data 并不是像这样直接提供一个对象
data: {
count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
data: function () {
return {
count: 0
}
}
3573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
