1.Jquery 操作数据需要操作DOM
2.Vue 主要面向数据操作(JSP)
Vue
1.导包（jar， js文件）
2.编写模板结构（body中的html）
3.编写脚本
创建VUE对象el属性指定需要绑定的元素编写对应的data整体构成 = 模板 + 数据
模板
<body> <!-- 视图 --> <div id="div"> {{msg}} </div> </body>数据来源
// 脚本 new Vue({ el:"#div", data:{ msg:"Hello Vue" } });el
指定你的模板元素位置data
指定模板中使用的数据methods：
可以定义方法，并且在方法中能够使用this来操作数据
普通对象定义形式
methods:{ study: function(){ alert(this.name + "正在" + this.classRoom + "好好学习!"); } }简写对象定义形式
methods:{ study(){ alert(this.name + "正在" + this.classRoom + "好好学习!"); } }v-html（操作普通文本）
作用：解析标签，将变量内容存放到标签的文本处{{}}：直接绑定变量并将数据直接展示在符号出=处v-bind（操作标签的属性值）【attr，prop】
普通形式
<a v-bind:href="url">百度一下</a>简写形式
<a :href="url">百度一下</a>用法
标签中需要的属性前加上冒号值是vue中data里面的变量条件显示指令
v-ifv-else-ifv-elsev-show 使用这个指令元素依然会被加载是否展示痛display属性决定循环指令
v-for
用法
写在对应元素上即可遍历生成多个该元素 <li v-for="name in names">{{name}}</li>v-on, @(at)
使用
冒号/@之后的名称是事件名称值：是vue对象中methods的方法 <button v-on:click="change()">改变div的内容</button> <button @click="change()">改变div的内容</button>v-model
作用：将变量和输入框进行双向绑定，变量改变了之后输入框会改变，反之亦然
使用
<input type="text" name="username" v-model="username">rules规则信息
name1: [ // required：是否必须， message：如果不满足校验条件显示内容，trigger：什么时候触发校验 { required: true, message: '请输入活动名称123132', trigger: 'blur' }, // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ]标签内容可以直接完全拷贝
<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-form>数据拷贝
自己创建vue实列
拷贝别人data函数中的返回值
new Vue({ el:"#div", data:{ form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } });函数问题（箭头函数，lambda表达式一个意思）
(valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }箭头函数和普通函数一样
function(valid){ if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }vue中的获取元素
this.$refs["student"]拷贝elementui需要注意
拷贝data时注意只需要data函数中return语句返回的对象即可方法直接拷贝methods