npm i vue-cli -g
vue init webpack vue01
cd vue01
npm install
npm run dev
vue基础
<li v-for="(index,item) in list " :key=index>{{item}}</li> 循环
<h1 :title=title>{{ msg }}</h1> 绑定属性及值
双向数据绑定 获取事件对象等
<template>
<div class="hello">
<h1 :title=title>{{ msg }}</h1>
<img :src="url" alt="">
<!-- 绑定html代码 -->
<div v-html='h'></div>
<div v-text='h'></div>
<ul>
<li v-for="(index,item) in list" :key=index :class="{'active':index===1}">{{item}}</li>
</ul>
<hr>
<input type="text" v-model="msg">
<button @click="getMsg()">获取表单里的数据</button>
<button @click="setMsg()">设置表单里的数据</button>
<hr>
<input type="text" ref="input">
<button @click="getInput()">获取第二个输入框值</button>
<hr>
<button @click="addData()">增加数据</button>
<hr>
<ul>
<li v-for="(item,key) in arr" :key=key>{{item}}</li>
</ul>
<hr>
<button @click="delData('111')">执行方法传值</button>
<button data-aid='123' @click="eventData($event)">事件对象</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome Vue.js App',
list: [1, 2, 3],
title: 'vue app',
url: '../assets/logo.png',
h: '<div>哈哈</div>',
flag: true,
arr: []
}
},
methods: {
getMsg () {
// alert('执行方法')
this.msg = ''
},
setMsg () {
this.msg = '设置数据'
},
getInput () {
console.log(this.$refs.input.value)
this.$refs.input.style.background = 'red'
},
addData () {
for (let i = 0; i < 10; i++) {
this.arr.push('我是第' + i + '条')
}
},
delData (val) {
alert(val)
},
eventData (e) {
console.log(e)
e.srcElement.style.background = 'red'
console.log(e.srcElement.dataset.aid) // 获取自定义属性的值
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.active {
color: red;
background: red;
}
</style>