持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
vue下载地址
vue的引入
将下载的vue.js放到工程目录下的js目录
<script src="js/vue.js"></script>
vue的使用
使用new Vue()来创建一个vue对象
里面传入对象参数, el对应的值为这个vue对象要管理的标签, data对应的值为vue对象要管理的数据
我们在输入框中修改数据, 在控制台中使用app.username, app.password来验证数据是否已经更改
<body>
<div id="app">
<input type="text" v-model="username">
<br>
<input type="password" v-model="password">
<br>
<span v-text="errMsg"></span>
<br>
<span>{{errMsg}}</span>
<br>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
username: 'shaosiming',
password: '123456',
errMsg: '用户名或密码错误'
}
})
</script>
v-model数据绑定
双向绑定数据, 但是只适用于表单类型的标签, 如: input
如果是span这种非表单标签, 要使用v-text, 或者使用{{username}}
v-on事件监听
事件监听诸如: 获得焦点, 失去信息, 单击事件, 双击事件
v-on:click="方法名"绑定事件
也可以使用简写形式 @click="方法名"来绑定事件
当然绑定的方法要写法methods配置项里面
<button v-on:click="click">click</button>
<button @click="click2">click2</button>
methods: {
click() {
alert('别点我了')
},
click2() {
alert('别点我了2')
},
}
事件冒泡
如果一个父标签有单击事件, 而父标签下的子标签也有自己的单击事件, 当我们点击子标签时, 控制台会打印输出两条语句, 也就是父标签和子标签的事件都调用了
<div @click="parentClickMe">
<button @click="childClickMe">click me</button>
</div>
childClickMe() {
console.log('childClickMe');
},
parentClickMe() {
console.log('parentClickMe');
}
使用.stop修饰符可阻止事件的冒泡, 也就是当我们点击子标签时, 就不再触发父标签的事件了
<div @click="parentClickMe">
<button @click.stop="childClickMe">click me</button>
</div>
使用.prevent修饰符, 阻止页面的跳转或提交, 适用于form标签和a标签
<a href="https://www.baidu.com" @click.prevent="">跳转</a>
<form action="xxx" @click.prevent="parentClickMe">
<button @click="childClickMe">click me</button>
</form>
使用.capture修饰符, 设置当多个事件一起触发时的优先级
<div @click.capture="parentClickMe">
<button @click="childClickMe">click me</button>
</div>
.self修饰符, @click绑定事件, 默认就是这个修饰符
<div @click.self="parentClickMe">
<button @click="childClickMe">click me</button>
</div>
.once修饰符, 事件只会触发一次
<div @click.once="parentClickMe">
<button @click="childClickMe">click me</button>
</div>
v-for v-bind
v-for用来遍历data中定义的数组, 生成多个标签元素
v-bind用来进行属性绑定
<select v-model="role">
<option v-for="role in roleList" v-bind:value="role.value">{{role.value}}.{{role.label}}</option>
</select>
<select v-model="role">
<option v-for="role, index in roleList" :value="role.value">{{index + 1}}.{{role.label}}</option>
</select>
vue中的组件
使用Vue.component来创建一个新的组件, 第一个参数为新组件的名字, 第二个参数为新的组件的配置项, 如data, methods等
在父组件中我们就可以使用新的组件名当标签名来使用就可以了
可以向子组件传递参数和自定义事件, 使用props来接收传递来过的参数, 使用this.$emit('event-name')来调用自定义事件
<login-btn :username="username" :password="password" @login-click="login"/>
// 定义一个名为 logn-btn 的新组件
Vue.component('login-btn', {
props: ['username', 'password'],
methods: {
click() {
console.log(this.username, this.password);
this.$emit('login-click')
},
},
template: '<div><button @click="click" username="username" password="password">登录</button></div>'
})
当然我们也可以将js部分放入一个js文件中, 然后通过script标签引入即可
computed - 计算属性
在计算属性中可以写一些复杂的业务逻辑, 计算属性的值是通过data的基本数据和一些业务逻辑来计算出来的
<div id="app">
请输入商品价格 <input v-model="price" type="text"><br>
请输入商品折扣
<select v-model="discount">
<option v-for="item in discounts" :value="item.value">{{item.label}}</option>
</select><br>
实际付款 <span>{{payment}}</span>
</div>
var app = new Vue({
el: '#app',
data: {
price: 0,
discount: 0.9,
discounts: [
{value: 0.9, label: '9折'},
{value: 0.8, label: '8折'},
{value: 0.7, label: '7折'},
]
},
computed: {
payment() {
var today = new Date();
var month = today.getMonth() + 1;
var day = today.getDate();
console.log(month, day);
if (month == 5 && day == 17 && this.price > 500) {
return this.price * this.discount - 50
} else {
return this.price * this.discount
}
}
},
})
watch
我们每点击一次按钮让进度增加10, 当然可以在increment()方法里实现全部的逻辑, 但是这样可能会让这个方法显得稍微有点臃肿, 我们可以借助监听属性来使用increment()方法变得更加简洁
<h2>{{progressMsg}}{{progressValue}}</h2>
<span class="progress" :style="spanStyle"></span>
<br>
<button @click="increment()">增加进度</button>
methods: {
increment() {
if (this.progressValue < 100) {
this.progressValue += 10;
}
}
},
watch: {
progressValue() {
if (this.progressValue >= 100) {
return
this.progressMsg = '当前任务已完成'
}
this.spanStyle = {
width: this.progressValue + 'px',
background: "green"
}
}
}
filter
我们有时候在使用数据的时候, 可能不会直接使用原数据, 而是在此基础上进行一些加工处理, 再交给用户使用, 这个操作在本质上不属于业务逻辑的范畴, 而应该使用过滤器去处理. 如: 当我们使用时候的时候, 会将时间格式化多种多样的形式展示给用户
Vue.filter('dateFormat2', (date)=>{
return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate()
})
filters
dateFormat(date) {
return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate()
}
不管是局部过滤器还是全局过滤器, 在使用上没有区别
<h2>{{today | dateFormat2}}</h2>
