浅谈Vue项目实战(页面渲染+事件绑定)
vue页面渲染,事件绑定,页面渲染vue是不会去操作dom节点,是有数据去操控节点
·
前言:项目使用vue,记录搭建项目到上线心得,会一直跟新………
页面渲染
vue是不会去操作dom节点,是有数据去操控节点,在js文件数据都在data里
*js代码片*
export default {
data() {
return {
formInline: {
user: 'admin',
region: 'shanghai'
}
}
}
}
*vue代码片*
*下面的标签是使用element ui搭建页面,和vue没毛关系,当成一般标签*
<template>
<el-row>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="名称">
<el-input v-model="formInline.name"></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
</template>
<script>
import listJS from './list.js'; //引入上面的js文件
export default listJS; //在把它输出,便可以渲染页面
</script>
vue数据渲染不只有这种方法,这是适合项目使用
渲染数据的方式个人经验
v-modle="formInline.name" 文本框渲染值
v-html="formInline.name" 一般标签渲染<h2><span><div>等
{{="formInline.name"}} 一般标签渲染<h2><span><div>等
v-for 渲染列表
v-bind:value 绑定value属性
v-on:click 或者@click click事件(两种写法)
v-modle:trim v-modle修饰符,去掉空格
//例如渲染list
list:[
{name:"zhang",age:"20",completed:true},
{name:"lisi",age:"21",completed:true},
{name:"longwu",age:"23",completed:true},
{name:"wangqi",age:"24",completed:true},
{name:"shang",age:"25",completed:true}
]
<li v-for="(item,index) in list" >
<input type="text" v-bind:value="item.name" v-bind:disabled="item.completed"/>
<input type="text" v-bind:value="item.age" v-bind:disabled="item.completed"/>
<button v-on:click="editItem(index)">编辑</button>
</li>
item就是每一列数据,index索引值,在项目中编辑,删除使用。
数据渲染差不多就这样,在看看钩子函数
*js文件*
export default{
//数据
data(){
return {
dialogFormVisible: false,
form: {
id:"1",
name: 'admin',
region: 'beijing'
},
}
},
//事件方法
methods :{
editItem(index){
this.list[index].completed=false;
}
},
//挂载到实例之后加载,个人理解初始化渲染页面这里可以调用方法
mounted() {
this.editItem(); //这样挂载后这个方法会被直接调用。
},
}
更多推荐
已为社区贡献16条内容
所有评论(0)