// 构造函数
var my = new Vue({
el: '#app', // 挂载点 (设置vue对象装载到页面位置)
template: '<div> {{ fruit }} </div>', // 模板
data: { // 数据
fruit: 'apple'
}
});
data中的属性会被代理到 my 对象中,可以使用 my.fruit 来获取属性值
代码
<template>
<!-- 只能有一个根节点 -->
<div>
<pre>
* v-text 是元素的innerText 只能在双标签元素中使用
* v-html 是元素的innerHTML 不能包含<!-- {{ xxx }} -->
* v-if 元素是否移出或插入
* v-show 元素是否隐藏或显示
* v-model双向数据绑定
* v-bind 单向数据绑定(内存js改变影响页面,页面改变不影响内存js)
</pre>
v-text:
<span v-text="text"></span>
<hr />
v-html:
<span v-html="html"></span>
<hr />
v-if:
<div v-if="isShow" style="height: 100px; background-color:red;"></div>
<hr />
v-show:
<div v-show="isShow" style="height: 100px; background-color:green;"></div>
<hr />
v-model:
<input type="text" name="username" v-model="username" />
{{ username }}<br/>
<!--给下面的input value赋值 用 v-bind:value="username" -->
<input type="text" name="" v-bind:value="username" />
<hr />
</div>
</template>
<script>
export default {
data(){
return {
text: '我是v-text内容',
html: `
<ul>
<li>哈哈</li>
<li>呵呵</li>
</ul>
`,
isShow: false,
username: 'admin'
}
}
}
</script>
<style>
</style>
:属性名="表达式"
<template>
<div>
<div v-bind:class="isRed? 'red' : 'green'">单个class样式</div>
<ul>
<!-- 当stu.score = A 时 匹配red,当stu.score= B 时匹配green -->
<li v-for="stu in stus" :class="{'A': 'red', 'B': 'green'}[stu.score]"> {{ stu.name }}</li>
</ul>
<div :class="{'red': true, 'big': true}">多个class样式</div>
</div>
</template>
<script>
export default {
data(){
return {
isRed: false,
stus: [
{
name: 'jack',
score: 'A'
},
{
name: 'lucy',
score: 'B'
},
]
}
}
}
</script>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
.big{
font-size: 30px;
}
</style>
v-on:事件名="表达式||函数名"
@事件名="表达式||函数名"
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
从 2.4.0 开始,v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。
用在普通元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 event属性:v−on:click="handle(′ok′,event 属性:v-on:click="handle('ok', event)”。
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<template>
<div>
<button v-on:click="isRed = !isRed">按钮</button>
<button v-on:click="change()">按钮</button>
<button @click="change">按钮</button>
</div>
</template>
<script>
export default {
data(){
return {
isRed: false,
stus: [
{
name: 'jack',
score: 'A'
},
{
name: 'lucy',
score: 'B'
},
]
}
},
// 声明函数,属于组件对象
methods: {
// 包含多个函数名称做key,函数提供做value
change (){
this.isRed = !this.isRed;
this.stus.push({
name: 'mick',
score: 'A'
});
}
}
}
</script>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
.big{
font-size: 30px;
}
</style>
<template>
<div>
<ul>
<li v-for="(stu, index) in stus" v-bind:key="index">
index:{{ index }} - stu:{{ stu }}
</li>
使用对象的方式-滚动歌词(时间做key,内容作为value)<hr />
<li v-for="(value, key, index) in person" v-bind:key="index">
value:{{ value }}-key:{{ key }}-index:{{ index }}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
isRed: false,
stus: [
{
name: 'jack',
score: 'A'
},
{
name: 'lucy',
score: 'B'
},
],
person: {
name: 'zhangsan',
realname: '张三'
}
}
}
}
</script>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
.big{
font-size: 30px;
}
</style>
<template>
<div>
<ul>
<li v-for="(stu, index) in stus" :key="stu.id" :class="{'A':'red','B':'blue','C':'green','D':'pink'}[stu.score]">
{{ stu.name }} - {{ stu.score }}
<button @click="del(index)">删除</button>
</li>
</ul>
学生姓名:<input type="text" name="name" v-model="name"/><br/>
学生成绩:<input type="text" name="score" v-model="score"/><br/>
<button @click="addStu">添加学生</button>
</div>
</template>
<script>
export default {
data(){
return {
isRed: false,
name:'',
score:'',
stus: [
{
id: 1,
name: '张三',
score: 'A'
},{
id: 2,
name: '张无忌',
score: 'B'
},{
id: 3,
name: '赵敏',
score: 'C'
},{
id: 4,
name: '殷素素',
score: 'D'
},
]
}
},
// 声明函数,属于组件对象
methods: {
// 添加
addStu (){
// 获取页面输入的值:v-model
this.stus.push({
id: 1,
name: this.name,
score: this.score
});
this.name = '';
this.score = '';
},
// 删除
del (index){
this.stus.splice(index, 1);
}
}
}
</script>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: skyblue;
}
.pink{
background-color: hotpink;
}
</style>
// 引入子组件
import 子组件对象名 from './xxx.vue';
// 声明子组件
components: {
// 组件名(在模板中使用): 组件对象
}
vue.component('组件名',组件对象);
// 引入子组件对象
import headerVue from './components/header.vue';
import bodyVue from './components/body.vue';
import footerVue from './components/footer.vue';
// 声明为全局组件
Vue.component('headerVue', headerVue);
Vue.component('bodyVue', bodyVue);
Vue.component('footerVue', footerVue);
<header-vue 属性名="常量值"></header-vue>
<header-vue :属性名="变量名"></header-vue>
props: ['属性名1','属性名2'...]
{{ 属性名 }}
export default {
data () {
return {
}
},
// 接受父组件参数的设置
props:['textbody']
}
app.vue
<template>
<div>
请输入内容:
<input type="text" name="name" v-model="name"/>
显示:{{ name | myFilter}}
</div>
</template>
<script>
export default {
// 自定义过滤器
filters: {
myFilter: function(value){
// 输入的内容翻转: 转换为数组->翻转数组 ->转换为字符串
return value.split('').reverse().join('');
}
},
data(){
return {
name:''
}
}
}
</script>
<style scoped>
</style>
main.js
// 全局过滤器
Vue.filter('myFilter1', function(value){
return value.split('').reverse().join(',');
});
<template>
<div>
<sub-vue ref="sub"></sub-vue>
<div ref="myDiv"></div>
</div>
</template>
<script>
import SubVue from './components/sub.vue';
export default {
data(){
return {
}
},
components: {
SubVue: SubVue
},
// 组件创建后,数据已经完成初始化,但DOM还未完成
created (){ // 事件的处理函数(created)
console.log(this.$refs.sub); // vue的组件对象
this.$refs.sub.$el.innerHTML = '哈哈'; // 获取vue组件对象对应的DOM对象
console.log(this.$refs.myDiv); // undefined 获取不到
},
// 数据装载到DOM上后,各种数据已经就位,将数据渲染到DOM上,DOM已经生产
mounted (){ // 事件的处理函数(created)
console.log(this.$refs.myDiv);// 获取的原生DOM对象
this.$refs.myDiv.innerHTML = '案发生的发生';
}
}
</script>
<style scoped>
</style>
npm install vue-router -S
impot Router from 'vue-router'
Vue.use(Router)
<a href="#/music">进入音乐</a>
<a href="#/movie">进入电影</a>
// 以上直接通过a标签方式直接指定路径名称,如果锚点发生改变不好维护
<!-- 根据name跳转(推荐使用该方式)-->
<router-link :to="{name: 'Music'}">进入音乐</router-link>
<router-link :to="{name: 'Movie'}">进入电影</router-link>
<!-- 根据path跳转-->
<router-link to="/movie">进入电影</router-link>
<router-link :to="{name: 'Detail',query: {id: user.id}}"> 查看详情 </router-link>
路由path不用改:
{
path: '/detail',
name: 'Detail',
component: Detail
}
- 2: 路径字符串 params:{key: value} -> /detial/1
<router-link :to="{name: 'Detail',params: {id: user.id}}"> 查看详情 </router-link>
路由path需要改:
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
this.$route.query.id
this.$route.params.id
<template>
<div >
<button @click="goMusic">跳转到music</button>
<button @click="goMovie">跳转电影</button>
<button @click="goBack">跳转到上一页</button>
<button @click="testQuery">编程导航传递参数query方式</button>
<button @click="testParams">编程导航传递参数params方式</button>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
goMusic (){
this.$router.push('/music');
},
goMovie (){
this.$router.push({
name: 'Movie' // 路由规则 name值
});
},
goBack (){
this.$router.go(-1); //-1 上一次浏览器记录 1 下一个浏览器记录
},
testQuery (){
// 查询字符串方式: /music?id=1&name=zhagnsan
this.$router.push({
name: 'Music', // 路由规则 name值
query: {
id: 1,
name: 'zhagnsan'
}
});
},
testParams (){
// 查询字符串方式: /movie/1
this.$router.push({
name: 'Movie', // 路由规则 name值
params: { // 路由规则 path: '/movie/:id',
id: 1,
name: 'zhagnsan'
}
});
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
window.addEventListener('hashchange', function(){
var text = '';// 可以换成模板数据
switch(location.hash){
case '#/music':
text = '各种音乐数据';
break;
case '#/movie':
text = '各种电影数据';
break;
}
document.getElementById('content').innerHTML = text;
});
{path: '/', redirect: '/home'}
{path: '/', redirect: {name: 'home'}}
{path: '*', component: notFoundVue}
<router-view name="header"></router-view>
<router-view ></router-view> 没有name使用default
<router-view name="footer"></router-view>
routes: [
{
path: '/',
name: 'Home',
// 注意这里名称为components
components: {
header: HeaderVue,
footer: FooterVue,
default: Home
}
}
]
借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
$(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); });