jqueryVue

最新推荐文章于 2022-07-18 09:00:42 发布

dukai954

最新推荐文章于 2022-07-18 09:00:42 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/dukai954/article/details/107103877

版权

JQury vs VUE

1.Jquery 操作数据需要操作DOM

2.Vue 主要面向数据操作(JSP)

Vue

1.导包（jar， js文件）

2.编写模板结构（body中的html）

3.编写脚本

创建VUE对象
el属性指定需要绑定的元素
编写对应的data

VUE特点

整体构成 = 模板 + 数据

模板

<body>
    <!-- 视图 -->
    <div id="div">
        {{msg}}
    </div>
</body>

数据来源

    // 脚本
    new Vue({
        el:"#div",
        data:{
            msg:"Hello Vue"
        }
    });

VUE参数

el
1. 指定你的模板元素位置
data
1. 指定模板中使用的数据

methods：

可以定义方法，并且在方法中能够使用this来操作数据

普通对象定义形式

methods:{
            study: function(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
}

简写对象定义形式

methods:{
            study(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }

面向数据编程

Vue指令

作用：编写模板文件使用

v-html（操作普通文本）
- 作用：解析标签，将变量内容存放到标签的文本处
- {{}}：直接绑定变量并将数据直接展示在符号出=处
v-bind（操作标签的属性值）【attr，prop】
- 普通形式
```
<a v-bind:href="url">百度一下</a>
```
- 简写形式
```
<a :href="url">百度一下</a>
```
- 用法
  - 标签中需要的属性前加上冒号
  - 值是vue中data里面的变量
条件显示指令
- v-if
- v-else-if
- v-else
- v-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">
```

Element-UI 使用

导包
1. css文件导入
2. 先导入vue的js文件
3. 导入element-ui自己的js
使用
1. 编写模板（vue）
2. 拷贝对应需要的组件到模板中
3. 初始化Vue实列

基础布局

概念
- 行
- 列
划分
- 每一个行一共24分
- 所有的el-col的span属性指定每一列的比例，数字之和24

Form表单（以实体为单位传递数据）

- 其中的prop属性指定的是form中的rules的属性名称
- 和实体类中的属性名相同
- model: 指定实体对象，data中的属性
- rules：指定校验规则，也是data中的属性
- ruleForm：相当于id

rules规则信息

name1: [
            // required：是否必须， message：如果不满足校验条件显示内容，trigger：什么时候触发校验
            { required: true, message: '请输入活动名称123132', trigger: 'blur' },
            //
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]

form表单拷贝

标签内容可以直接完全拷贝

<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: ''
        }
      }
    });

form 表单问题

函数问题（箭头函数，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;
                      }
}