一、ES6语法
1、声明变量
//之前使用var
var a='a';
//ES6中使用let声明变量
let b='b';//let是局部变量,var是全局变量 let定义的变量出了定义的代码块无法使用,var可以
2、声明常量
//ES6中声明常量,常量一旦定义,它的值就不能被改变
const a=1;
3、结构表达式
<script type="text/javascript">
//ES6中结构表达式
var array=["张根硕","古巨基","阮经天"];
//结构数组
var [a,b,c]=array;
console.log(a,b,c);
//结构对象
var person={
name:"王敏",
age:20,
sex:true,
say:function (){
alert("我是王敏")
}
}
//结构对象的时候,属性名要一致
var {name,age,sex,say}=person;
console.log(name,age,sex);
say();//此时say方法可以直接调用
</script>
4、ES中声明函数的三种表达式
<script type="text/javascript">
//方式一
function say1(){
alert("方式1")
}
//方式二:箭头表达式
var say2=(name)=>{
alert("方式2"+name);
}
//方式三:如果参数只有1个,可以不写(),如果函数体只有1句话,{}可以不写
var say3=()=>alert("方式3");
say1();
say2("王敏");
say3();
</script>
二、使用yarn创建vue项目
1. 安装脚手架
yarn global add @vue/cli
2. 使用脚手架创建项目
vue create 项目名 || vue ui(图形化创建了解)
3. 启动项目
yarn serve
启动成功:
//切换为淘宝镜像
yarn config set registry https://registry.npm.taobao.org/
//启动服务器后, 端口默认8080
http://IP:8080 -> 访问vue项目页面
三、自定义组件
1、自定义组件创建
1. 新建一个xxx.vue文件(.vue就是一个组件)
建议:所有组件首字母大写,采用驼峰
2. 书写组件三大部
根元素
script -- 组件行为(js)
style -- 组件样式(css)
2、使用自定义组件 xxx.vue
组件默认为自动暴露出去
1. 引入自定义组件
<script>
import 组件名(变量) from './xxxx.vue'
2. 注册组件
export default {
components: {
组件名 //key组件名:value组件的变量 如果key和value一样时可以直接写组件名
}
}
3. 在template中使用标签渲染即可
<组件名/>
3、HTML页面中自定义组件
1、全局组件和局部组件
局部组件:Vue实例里面创建的
new Vue({
el: "#app2",
data: {},
components : {
"mycomponent3" : {
template : "<h1>这是一个局部组件</h1>"
}
}
});
全局组件:
Vue.component("myComponent1",{
template : "<h1>这是第一个全局组件</h1>"
})
var component2Config = {
template : "<h1>这是第二个全局组件</h1>"
};
Vue.component("mycomponent2",component2Config);
局部组件:只能在它所挂载的标签下使用(例如上面的mycomponent3只能在id为app2的标签下使用)
可以在全局任何地方使用
注意:如果是组件的命名是驼峰命名,那使用该组件的时候全部小写,大写的字母前加一个-
上面的myComponent1组件,如果要使用要<my-component1></my-component1>
2、组件模板
上面定义的组件,template只有一个标签,如果组件中需要多个标签可以定义<template>
body中写:template中需要一个根标签
<template id="mytemplate">
<div>
<h1>你好</h1>
<h2>vue</h2>
</div>
</template>
定义组件:
Vue.component("myComponent1",{
template : "#mytemplate",
})
四、指令
3.1 、什么是指令
指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
3.2、常见的指令
v-text=“表达式” 设置标签中的文本 .innerText
v-html=“表达式” 设置标签中的html .innerHTML
v-if=“表达式” 判断条件 :操作节点元素,对元素进行新增和删除
v-show=“表达式” 判断是否隐藏:操控元素的css,display属性让其隐藏和显示
v-for=“表达式” 循环
v-bind=”表达式” 绑定动态属性:动态属性可以获取data或者是循坏里的动态数据
v-on=“表达式” 绑定事件,缩写@事件名=‘函数’
v-model=“表达式” 数据双向绑定,获取value值
3.3、vue的计算属性
计算属性的重点突出在 属性 两个字上(属性是名词),首先它是个 属性 其次这个属性有计算 的能力(计算是动词),这里的 计算 就是个函数。
<body>
<div id="app">
输入干活的天数:<input type="text" v-model="days"/>
<br>
你的工资是:{{totalMoney}}
</div>
</body>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
days:0,
},
computed:{//计算属性
totalMoney(){
var total=this.days*300;
return total;
}
}
})
</script>
五、路由
1、什么是路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射,通过一个路径的url地址,可以唯一找到一个资源。
2、使用路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE路由</title>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/product">产品</router-link>
</div>
</body>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
//>>1.定义首页:组件
var index = Vue.component("index", {
template : "<h1 id='shou'>首页</h1>",
});
//>>2.公司产品:组件
var product = Vue.component("product", {
template : "<h1>公司产品</h1>"
});
//>>3.关于我们:组件
var about = Vue.component("about", {
template : "<h1>关于我们</h1>"
});
//>>4.创建一个路由:
var router = new VueRouter({
routes : [ {
path : "/",//路由地址
component : index
//路由对应的资源
}, {
path : "/about",//路由地址
component : about
//路由对应的资源
}, {
path : "/product",
component : product
}, ]
});
//创建一个vue对象
var app = new Vue({
el : "#app",//挂载在app上
router : router//使用路由对象
});
</script>
</html>