vue和jquery学哪个

转载

flyingsmiling 2024-12-02 08:14:10

文章标签 vue和jquery学哪个 Vue 数据输入框 文章分类 jQuery 前端开发

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参数

指定你的模板元素位置

data

指定模板中使用的数据

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 使用

导包

css文件导入
先导入vue的js文件
导入element-ui自己的js

使用

编写模板（vue）
拷贝对应需要的组件到模板中
初始化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;
                      }
}