一、Vue介绍
1.Vue.js是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
2.Vue和jQuery的区别
- jquery到vue转变是一个思想的转变，是将jquery直接操作dom的思想转变到操作数据上去。
- jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。
- Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
二、Vue模板语法
官网安装下载地址：
https://cn.vuejs.org/v2/guide/installation.html
2.1 Vue常用指令之v-text
导入Vue并使用
<script src="./static/vue.min.js"></script>
</head>
<body>
<div id="app" v-text="greeting"></div>
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
new Vue({
el: "#app",
data: {
greeting: "Hello Vue",
}
})
</script>
</body>
2.2 Vue常用指令之v-html
<div id="d1">
<h1 v-text="name"></h1>
<div v-html="html"></div>
</div>
<script>
var vm = new Vue({
el: "#d1",
data: {
name: "tian",
html:"<h1 >hello 我的第一个Vue值</h1>",
}
})
</script>
2.3 Vue常用指令之v-for
<div id="d1">
<ul>
<li v-for="i in lis">{{ i.name }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#d1",
data: {
name: "tian",
html:"<h1 >hello 我的第一个Vue值</h1>",
lis:[{"name":"tian"},{"name":"jian"},{"name":"ying"}]
}
})
2.4 Vue常用指令之v-if v-else-if v-else
<div id="d1">
<div v-if="name == 'tian'">我是田田</div>
<div v-else>哈哈</div>
</div>
<script>
var vm = new Vue({
el: "#d1",
data: {
name: "tian",
})
</script>
2.5 Vue常用指令之v-show
- 切换性能
v-show的切换性能高一些，display: none
v-if的切换是通过append - 加载性能
v-show的慢
v-if快
<div id="d1">
<h1 v-show="show">我是好样的</h1>
</div>
<script>
var vm = new Vue({
el: "#d1",
data: {
show:true,
})
</script>
2.6 Vue常用指令之v-bind
简写直接冒号:
<div id="app">
<a v-bind:href="jingdong" >去京东</a>
<div :class="[ isActive ]"></div>
</div>
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
let vm = new Vue({
el: "#app",
data: {
jingdong: "https://www.jd.com",
isActive: 'active',
}
})
</script>
2.7 Vue常用指令之v-on
<div id="app">
<h1 :class="{ active: isActive }">闷骚哥</h1>
<!--<button v-on:click="changeColor">点击让闷骚哥变绿</button>-->
<button @click="changeColor">点击让闷骚哥变绿</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
isActive: false
},
methods: {
changeColor: function () {
this.isActive = !this.isActive;
},
}
})
</script>
2.8 Vue常用指令之v-model 侦听器
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
<div id="app">
<input type="text" v-model="name"/>
<input type="checkbox" value="男" v-model="genders"/>
<input type="checkbox" value="女" v-model="genders"/>
<select v-model="girlfriends">
<option>康抻</option>
<option>鞠莹莹</option>
<option>嘉琪</option>
</select>
<textarea></textarea>
<hr>
{{ name }}
{{ genders }}
{{ girlfriends }}
</div>
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
let vm = new Vue({
el: "#app",
data: {
name: "juyingying",
genders: [],
girlfriends: []
},
})
</script>
2.9 Vue常用指令之计算属性
计算其初始值，当在input框中输入数据时，数据为字符串形式,结果显示为拼接的状态。
<div id="d1">
<table>
<thead>
<tr>
<td>学科</td>
<td>成绩</td>
</tr>
</thead>
<tbody>
<tr>
<td>python</td>
<td><input type="text " v-model="python"></td>
</tr>
<tr>
<td>vue</td>
<td><input type="text " v-model="vue"></td>
</tr>
<tr>
<td>总成绩</td>
<td>{{ sumScore }}</td>
</tr>
</tbody>
</table>
</div>
<script>
let vm = new Vue({
el: "#d1",
data: {
name: "tian",
html: "<h1 >hello 我的第一个Vue值</h1>",
lis: [{"name": "tian"}, {"name": "jian"}, {"name": "ying"}],
show: true,
python:10,
vue:111,
},
computed: {
sumScore: function () {
console.log(1);
return this.python + this.vue;
},
},
})
</script>
字符串转为数字类型用：
return Number(this.python) + Number(this.vue);
数字类型转字符串类型用加空字符串：
this.python + ‘’
2.10 Vue常用指令之侦听属性
2.11 Vue常用指令之自定义属性
//number 转换为数字 //lazy 鼠标移出时再计算
<td><input type="text" v-model.number.lazy="python"/></td>
<td><input type="text" v-model.lazy="vue"/></td>
2.12 Vue常用指令之获取DOM元素
2.13 Vue常用指令之element-ui
三、Vue组件用法
组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。
- 全局组件
1.1 <div id="app"><global-component></global-component></div>
1.2 <div id="app"><app-header></app-header></div>
Vue.component("global-component", {
template: `
<div>
<h1>{{ greeting }}</h1>
</div>
`,
data() {
return {
greeting: "hello world",
}
}
})
let Header = {
template: `
<div>
<h1>{{ greeting }}</h1>
</div>
`
}
let App = {
template: `
<div>
<my-header></my-header>
</div>
`,
components: {
"my-header": Header,
},
// 组件的私有数据
data(){}
}
new Vue({
el: "#app",
template: `<app-header></app-header>`,
components: {
"app-header": Header,
}
})
- data必须是函数
- 没有el属性
- 局部组件
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
2.1 创建局部组件，起始就是创建一个JavaScript object
let Header = {
template: `
<div>
</div>
`
}
2.2 注册
2.2.1 new Vue({
el: "#app",
template: `<app-header></app-header>`,
components: {
"app-header": Header,
}
})
2.2.2 let App = {
template: `
<div>
<app-header></app-header>
</div>
`,
components: {
"app-header": Header,
}
- 父子组件之间的通信
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表
let Header = {
template: `
<div>
<h1>{{ fatherData }}</h1>
</div>
`,
props: ["fatherData"]
};
let App = {
template: `
<div>
<app-header :fatherData="count"></app-header>
</div>
`,
components: {
"app-header": Header,
},
data(){
return {
count: 100,
}
}
};
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App,
}
})
- 子父组件之间的注册
Vue 实例提供了一个自定义事件的系统来解决这个问题。我们可以调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件
let Header = {
template: `
<div>
<button @click="sendData">点击给父亲传递数据</button>
</div>
`,
methods: {
sendData: function() {
this.$emit("change-size", 0.1);
}
}
};
let App = {
template: `
<div>
<app-header v-on:change-size="changeSize"></app-header>
</div>
`,
components: {
'app-header': Header
},
methods: {
changeSize: function(value) {
count += value;
}
}
};
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App,
}
})
四、Vue 路由系统
VueRouter的实现原理是根据监控锚点值的改变，从而不断修改组件内容来实现的
- 安装使用
Vue官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Home = {
template: `
<div>这是首页</div>
`
};
let Login = {
template: `
<div>登录页面</div>
`
};
let Register = {
template: `
<div>注册页面</div>
`
};
let App = {
template: `
<div>
<router-link to="/home">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`
};
// 2. 在vue中中使用vue-router对象
Vue.use(VueRouter);
// 3. 创建一个vue-router对象
let router = new VueRouter({
// 此处要特别注意是routes，不是routers
routes: [
{
path: '/home',
component: Home,
},
{
path: "/login",
component: Login
},
{
path: "/register",
component: Register,
}
]
});
// 4. 在vue实例中使用新创建的vue-router对象
new Vue({
el: "#app",
template: `<app></app>`,
components: {
"app": App,
},
router: router
})
</script>
</body>
</html>
- 路由命名规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Login = {
template: `
<div>登录页面</div>
`
};
let Register = {
template: `
<div>注册页面</div>
`
};
let App = {
template: `
<div>
<router-link :to="{ name: 'login'}">登录</router-link>
<router-link :to="{ name: 'register'}">注册</router-link>
<router-view></router-view>
</div>
`
};
// 在vue中中使用vue-router对象
Vue.use(VueRouter);
// 创建一个vue-router对象
let router = new VueRouter({
// 此处要特别注意是routes，不是routers
routes: [
{
name: 'login',
path: "/login",
component: Login
},
{
name: 'register',
path: "/register",
component: Register,
}
]
});
// 在vue实例中使用新创建的vue-router对象
new Vue({
el: "#app",
template: `<app></app>`,
components: {
"app": App,
},
router: router
})
</script>
</body>
</html>
- 路由中使用参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 常用的两种查询方式
// xxx.html/user/1
// xxx.html/user/id=1
let userParams = {
template: `
<div>用户一信息</div>
`
};
let userQuery = {
template: `
<div>用户二信息</div>
`
};
let App = {
template: `
<div>
<router-link :to="{ name: 'userParams', params: { userId: 1} }">用户一</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">用户二</router-link>
<router-view></router-view>
</div>
`,
};
// 在vue中使用vue-router
Vue.use(VueRouter);
// 创建一个VueRouter对象
let router = new VueRouter({
routes: [
{
name: 'userParams',
path: '/users/:userId',
component: userParams
},
{
name: 'userQuery',
path: '/users',
component: userQuery,
}
]
});
// 在vue中使用vue-router
new Vue({
el: "#app",
template: `<app></app>`,
components: {
'app': App,
},
router: router
})
</script>
</body>
</html>
- 路由中实现子路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.home {
width: 500px;
height: 500px;
background-color: #0FC57C;
}
.courses {
width: 500px;
height: 500px;
background-color: #5b80b2;
}
</style>
<script src="../statics/vue.min.js"></script>
<!--1. 引入vue-router-->
<script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
let Home = {
template: `
<div class="home">这是首页</div>
`
};
let Courses = {
template: `
<div class="courses">课程页面
<div class="details">
<router-link to="details">课程详情</router-link>
<router-link to="students">学员故事</router-link>
<router-view></router-view>
</div>
</div>
`
};
let Details = {
template: `
<div>课程详情页</div>
`
};
let Students = {
template: `
<div>学员故事</div>
`
};
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/courses">课程页面</router-link>
<router-view></router-view>
</div>
`
};
let routes = [
{
path: '/',
component: Home
},
{
path: '/courses',
component: Courses,
children: [
{
path: 'details',
component: Details,
},
{
path: 'students',
component: Students
}
]
}
];
Vue.use(VueRouter);
let router = new VueRouter({
routes: routes,
});
new Vue({
el: "#app",
template: `<app></app>`,
router: router,
components: {
'app': App,
}
})
</script>
</body>
</html>
- VueRouter在路径中去掉#号
在创建路由实例时，我们可以新增一个属性，该属性用来去掉在路径中显示#号，它的属性名为mode，属性值为’history’
扫一扫
1234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
