这篇博客，最后会使用到的知识展示，先看效果 *效果很丑，但是内容很宁
完整代码如下：（后面会有具体细节讲解）
一、App.vue:
<template>
<div id="app">
<!--<img src="./assets/logo.png">
<router-view/>-->
<!--<test1 msg="新的属性值"></test1>-->
<usershow></usershow>
</div>
</template>
<script>
import test1 from './components/test1'
import usershow from './components/usershow'
export default {
name: 'app',
components: {
usershow
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>二、在src–>components–创建test1.vue
<template>
<div id="test1">
<div>{{message}}</div>
<ul>
<li v-for="item in items">{{item.title}}</li>
</ul>
<button v-on:click="greet('Hello12321')">getButton_Alert say :</button>
<!--键盘事件-->
<!--<input type="text" v-on:keyup="pressKey" v-on:keyup.alt.enter="enterHit"/>-->
<hr />
<!--computed 计算属性-->
<label> First Name</label>
<input type="text" v-model="user.firstName" />
<br />
<label> LastName</label>
<input type="text" v-model="user.lastName" />
<h4>{{fullName}}</h4>
<h4>{{msg}}</h4>
</div>
</template>
<script>
export default {
name: "test1",
props:{
msg:{
type:String,
default:"默认文字",
}
},
data() {
return {
message:'123',
items:[{title:"items 1"},
{title:"items 2"},
{title:"items 3"}
],
showName:false,
user:{
firstName:"Chenxh",
lastName:"Chenxh",
},
}
},
methods:{
greet:function(args){
alert(args);
},
enterHit:function(){
console.log("enterHit");
},
},
computed:{
fullName:function(){
return this.user.firstName+" "+this.user.lastName
}
}
}
</script>
<style>
</style>三、在src–>components–创建usershow.vue
<template>
<div id="usershow">
<h1>USER</h1>
<form v-on:submit="addUser">
<input type="text" v-model="newUser.name" placeholder="Enter name" /><br />
<input type="text" v-model="newUser.email" placeholder="Enter email" /><br />
<input type="submit" value="Submit" />
</form>
<ul>
<!--展示用户信息-->
<li v-for="user in users">
{{user.name}}:{{user.email}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "usershow",
data() {
return {
newUser: {},
users: [
{
name: "Chenxh1",
email: "[email protected]",
contacted: false
},
{
name: "BruceXuheng",
email: "[email protected]",
contacted: false
},
{
name: "Chenxh3",
email: "[email protected]",
contacted: false
},
{
name: "Chenxh4",
email: "[email protected]",
contacted: false
}
]
}
},
methods: {
addUser: function(e) {
this.users.push({
name: this.newUser.name,
email: this.newUser.email,
contacted: false
});
e.preventDefault();
}
}
}
</script>
<style>
</style>细节讲解：
只需要在初始的Vue项目中，修改这三个文件就可以实现图片中的效果，接下来一次记录、解释代码中的使用和含义。
1、xx.vue文件分为三模块：
<template>
</template>
<script>
</script>
<style scoped>
</style>template：是视图层模块；
script：是逻辑实现模块；
style：是样式控制模块（css样式）。
script里内容较为特殊，尤为重要，写的模板格式是：
export default {
name: "test",
props:{
//可以添加标签属性
},
data() {
return {
//返回templates里的数据
}，
}，
methods: {
//设置点击事件
addUser: function(e) {
}
}，
computed:{
}
}2、v-for的使用：
1】在template中使用需要有数据展示的标签
需要注意点有：*div的id，*v-for中的写法a in list;
2】在script中添加返回的数据
在data方法中返回数据，例如下面代码中users这种集合写法
*listName:[
{属性名：”content”,属性名：”content”},
{属性名：”content”,属性名：”content”}
],
<template>
<div id="newflag">
<ul>
<li v-for="user in users">{{user.name}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "newflag",
data() {
return {
users: [
{
name: "chenxh"
},
{
name: "chenxh"
},
]
}
},
}
</script>
<style>
</style>3、v-on:click=”onClickLis(‘这里可以传参数’)”
主要注意点是methods的写法格式，点击事件的方法写法。
<template>
<div id="newflag">
<button v-on:click="onClickLis('这里可以传参数')">biubiubiu</button>
</div>
</template>
<script>
export default {
name: "newflag",
methods: {
onClickLis: function(arg) {
alert(arg);
}
}
}
</script>
<style>
</style>4、v-html解析html代码展示
<template>
<div id="newflag">
<h1 v-html="message"></h1>
</div>
</template>
<script>
export default {
name: "newflag",
data(){
return{
message: '<a href="http://blog.csdn.net/Mr_ChenXu?ref=toolbar">http://blog.csdn.net/Mr_ChenXu?ref=toolbar</a>',
}
},
}
</script>
<style>
</style>5、v-bind:class & v-bind:model
1】：v-bind:class=”{‘class2’: class1} 绑定class可以是集合，key就是class样式名，value就是设置使用boolean属性；
2】：v-model=”class1” 设置class为标签属性的值。
<template>
<div id="newflag">
<input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class2': class1}">
改变
</div>
</div>
</template>
<script>
export default {
name: "newflag",
data() {
return {
// message: '<a href="http://blog.csdn.net/Mr_ChenXu?ref=toolbar">http://blog.csdn.net/Mr_ChenXu?ref=toolbar</a>',
class1: false,
}
},
}
</script>
<style>
.class1 {
background: #444;
color: #eee;
}
.class2 {
background: #42B983;
color: #eee;
}
</style>6、对象及对象属性的使用：
<template>
<div id="newflag">
<label>姓名</label>
<input type="text" v-model="user.myName" />
<br />
<label>性别</label>
<input type="text" v-model="user.sex" />
</div>
</template>
<script>
export default {
name: "newflag",
data() {
return {
user:{
myName:'chenxuheng',
sex:'Man'
},
}
},
}
</script>
<style>
</style>7、export defalut中的属性 props的作用
1】在使用标签添加属性，代码如下：
<newflag msg="覆盖默认"></newflag>2】在newflag的.vue文件中：
<template>
<div id="newflag">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "newflag",
props:{
msg:{
type:String,
default:"默认文字",
}
},
}
</script>
<style>
</style>