您的位置：首页 > Web前端 > Vue.js

Vue基础使用

2020-06-30 17:11 106 查看

Vue

Vue与JQuery比较

  • VUE与Jquery比较 jquery在操作数据的时候一般要操作dom,进行标签的crud
  • Vue主要是面向数据操作，主要功能是处理数据，对于标签的操作由Vue自动完成
  • Vue面向数据编程思想的一种体现，对数据完成操作即对标签完成操作

Vue简介

  • Vue是一套构建用户界面的渐进式前端框架
  • 自是关注视图层，方便与其他已有库配合或与已有项目整合
  • 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
  • Vue特点： 易用：在有 HTML CSS JavaScript 的基础上，快速上手
  • 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用
  • 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

Vue入门

  • Vue组成部分

    视图：负责页面渲染 ，主要由HTML+CSS组成
  • 脚本：负责业务数据模型与数据的处理逻辑

  • Vue核心对象：每个Vue程序都是从一个Vue核心对象开始的

    ​ let vm=new Vue({

    ​ 选项列表；

    ​ });

  • 选项列表：

      el:用于接收当前页面的元素，一般是用选择器获取想要操作的元素
    • data:用于保存当前Vue对象中的数据，给模板中的变量赋值
    • methords:定义方法，方法可以通过对象名调用

  • 数据绑定：

      给模板中的数据赋值
    • 格式：{{变量}}
    <body>
<!-- 模板 -->
<div id="div">
<div>姓名：{{name}}</div>
<div>班级：{{classRoom}}</div>
<button onclick="hi()">打招呼</button>
<button onclick="update()">修改班级</button>
</div>
</body>
<!-- 引入Vue文件 -->
    ## Vue指令

- 指令：标签中 是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for

- 使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式

- 常用指令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2dlS6IQt-1593508243996)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593396597153.png)]

- 文件插值：解析html标签

~~~html
<body>
<div id="div">
<div>{{msg}}</div>
<div v-html="msg"></div> // 解析标签
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 解析标签指令
new  Vue({
el:"#div",
data:{msg: "<b>炸弹人</b>"}
})
</script>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L4V0XCe7-1593508243999)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593397440716.png)]

    • 绑定属性

      v-bind 语法一：v-bind:属性名=变量
    • 语法二：：属性名=变量民
    <style>
.my{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="div">
<a v-bind:href="url">百度一下</a>
<br>
<a :href="url">百度一下</a>
<br>
<div :class="cls">我是div</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{ // 相当于给变量赋值
url:"www.baidu.com",
cls:"my"
}
})
</script>

    • 条件渲染

      v-if:对条件进行判断是否渲染

    • v-else:相当于java中的if中的else与另外两个标签配合使用

    • v-else-if:与if和else配合使用

    • v-show :切换display的值 在不满足条件的时候在dom树上有这个元素但是存在属性display

    • v-for:列表渲染

      <body>
<div id="div">
<!-- 对传递的data大小进行判断-->
<div v-if="data>4">data大于4</div>
<div v-else-if="data>3">data大于3小于4</div>
<div v-else="data<3">data小于3</div>

<div v-show="flag">显示</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
data:5,
flag:false
}
});
</script>

      列表渲染

      <body>
<div id="div">
<ul>
<li v-for="name in names"> // 循环遍历names数组中的数据生成li标签
{{name}}
</li>
<li v-for="value in student">// 循环遍历对象中的属性信息生成li标签
{{value}}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
names:["零点","王侠","詹蓝","赵樱空","霸王"],
student:{
name:"郑吒",
age:24,
heigh:175
}
}
})
</script>

    事件绑定

    • v-on绑定事件
    • 语法： 在模板标签中添加 v-on:事件名=“需要触发的函数”
    • @事件名=“触发的函数”
    <body>
<div id="div">
<div>{{name}}</div>
<button v-on:click="change1()">改变div的内容</button>
<button @dblclick="change2()">改变div的内容</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
name:"南兖州"
},
methods:{
change1(){
this.name="北俱芦洲"
},
change2(){
this.name="桐叶洲"
}
}
})
</script>

    表单绑定

    • 表单绑定 v-model ：在表单元素上创建双向数据绑定
  • 双向数据绑定
      更新data数据表单中的数据也会更新
    • 表单中的数据更新data中的数据也会更新
    <body>
<div id="div">
<form autocomplete="off">
姓名：<input type="text" name="username" v-model="username"> // 拿到data中的数据并赋值给input标签
<br>
年龄：<input type="number" name="age" v-model="age">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
username:"张三",
age:23
}
});
</script>

    Element的基本使用

    • 简介：

      饿了么公司前端团队开发的一款基于 Vue的网站组价库
    • Element 官网：https://element.eleme.cn/#/zh-CN

  • 基本使用

        下载 Element 核心库。
      1. 引入 Element 样式文件。
      2. 引入 Vue 核心 js 文件。
      3. 引入 Element 核心 js 文件。
      4. 编写按钮标签
      5. 通过 Vue 核心对象加载元素

  • 表单组件

    // rules:校验规则 ref:每个表单的唯一标识
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
// prop 校验具体规则
<el-form-item label="自定义" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="下拉选择" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="选择一" value="shanghai"></el-option>
<el-option label="选择二" value="beijing"></el-option>
</el-select>
</el-form-item>

<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
new Vue({
el:"#div",
data:{
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
},
methods:{
submitForm(formName) {
// 调用validate函数返回一个布尔值
this.$refs[formName].validate((valid) => {
// valid是一个布尔值
if (valid) {
// 通过验证要执行的事件
alert('submit!');
} else {
// 没有通过验证要执行的事件
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
// this.$refs[formName]选中forName表单
this.$refs[formName].resetFields();
}
}
});
</script>

  • 表格组件

      当
      el-table
      元素中注入
      data
      对象数组后，在
      el-table-column
      中用
      prop
      属性来对应对象中的键名即可填入数据，用
      label
      属性来定义表格的列名。可以使用
      width
      属性来定义列宽。 
    <div id="div">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date" //template数据中data属性
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"//template数据中name属性
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"//template数据中address属性
label="地址">
</el-table-column>
</el-table>
</template>
</div>

<script>
new Vue({
el:"#div",
data:{
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
})
</script>

    Vue自定义组件

    • 自定义组件格式

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xoe4abTT-1593508244001)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593482919895.png)]

    <body>
<div id="div">
<my-button>我的按钮</my-button>
<wx-botton locaton="地址" gender="male" age="23"></wx-botton> // 使用自定义标签
</div>

</body>
<script>
Vue.component("my-button",{
// 属性
props:["style"],
// 数据函数
data: function(){
return{
msg:"我的按钮"
}
},
//解析标签模板
template:"<button style='color:red'>{{msg}}</button>"
});
Vue.component("wx-botton",{
// 自定义属性
props:["location","gender","age"],
// 定义模板
template:"<div><div>{{location}}</div><div>{{gender}}</div><div>{{age}}</div><div>{{bzr}}</div></div>",
// 定义标签属性默认值
data:function(){
return {
bzr:"lzll",
age:"23"
}
}
})

new Vue({
el:"#div"
});
</script>

    • 生命周期

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uXpknsJz-1593508244003)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593484677775.png)]

      Vue异步请求

      axios

    • 使用

      导入axios的js文件

    • 在Vue中的methods里面使用

    • axios中的方法

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UivZCXa4-1593508244004)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593486654446.png)]

    <script>
new Vue({
el:"#div",
data:{
name:"张三"
},
methods:{
send(){
// GET方式请求
// axios.get("testServlet?name=" + this.name)
//     .then(resp => {
//         alert(resp.data);
//     })
//     .catch(error => {
//         alert(error);
//     })

// POST方式请求
axios.post("testServlet","name="+this.name)
.then(resp => {
alert(resp.data);
})
.catch(error => {
alert(error);
})
}
}
});
</script>

    {
    // alert(resp.data);
    // })
    // .catch(error => {
    // alert(error);
    // })

    // POST方式请求
axios.post("testServlet","name="+this.name)
.then(resp => {
alert(resp.data);
})
.catch(error => {
alert(error);
})
}
}
});
    ~~~
    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航