Vue-day01
一. 认识vue
#渐进式技术栈,通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件
入门
-
编写html代码片段并给该片段取一个id属性
<div id="div"> <div>姓名:{{name}}</div> <div>班级:{{classRoom}}</div> <button onclick="hi()">打招呼</button> <button onclick="update()">修改班级</button> </div> ```
-
引入vue.js
<script src="js/vue.js"></script> ```
-
创建一个Vue对象
-
el属性
- 设置管理的代码片段的
-
data属性
- 声明变量
-
methods属性
- 定义各种方法
-
new Vue({ el:"#div", data:{ name:"张三", classRoom:"黑马程序员" }, methods:{ study(){ alert(this.name + "正在" + this.classRoom + "好好学习!"); } } });
-
二. 指令-重点掌握
1. 文本指令
-
插值表达式:差值插值表达式不会解析html标签
- {{变量的名字}}
-
v-html属性:属性会解析html标签内容
-
msg:"<b>Hello Vue</b>" //这样文字会被加粗
2. 绑定属性
v-bind:为 HTML 标签绑定属性值。
-
作用:把vue对象的data属性里面声明的变量和标签的某一个属性进行绑定
-
场景-绑定class属性
-
写法
<div v-bind:class="变量的名字"> <div :class="变量的名字"> //推荐方式 <body> <div id="div"> <a v-bind:href="url">百度一下</a> <a :href="url">百度一下</a> <div :class="cls">我是div</div> </div> </body> <script> new Vue({ el:"#div", data:{ url:"https://www.baidu.com", cls:"my" //上面class里面数据会根据这里设置的值而改变 } }); </script>
3. 条件渲染指令
-
v-if:条件性的渲染某元素,判定为真时渲染,否则不渲染。
-
v-else:条件性的渲染。
-
v-else-if:条件性的渲染。 在页面代码中不能显示出来
-
v-show:根据条件展示某元素,区别在于切换的是 display 属性的值。在页面代码中能显示,只是display为nona
-
<div id="div"> <!-- 判断num的值,对3取余 余数为0显示div1 余数为1显示div2 余数为2显示div3 --> <div v-if="num % 3 == 0">div1</div> <div v-else-if="num % 3 == 1">div2</div> <div v-else="num % 3 == 2">div3</div> </div> </body> <script> new Vue({ el:"#div", data:{ num:1, flag:false } }); </script>
4. 集合或者对象的遍历
v-for:列表渲染,遍历容器的元素或者对象的属性。
-
-
<body> <div id="div"> <ul> <li v-for="name in names"> {{name}} </li> <li v-for="value in student"> {{value}} </li> </ul> </div> </body> <script> new Vue({ el:"#div", data:{ names:["张三","李四","王五"], student:{ name:"张三", age:23 } } }); </script>
5. 事件绑定
-
v-on:为 HTML 标签绑定事件。
-
<a v-on:click="函数名称()"> <a @click="函数名称()"> //简写方式(推荐使用) <body> <div id="div"> <div>{{name}}</div> <button v-on:click="change()">改变div的内容</button> <button v-on:dblclick="change()">改变div的内容</button> <button @click="change()">改变div的内容</button> </div> </body> <script> new Vue({ el:"#div", data:{ name:"黑马程序员" }, methods:{ //调用的方法 change(){ this.name = "传智播客" } } }); </script>
-
-
注意:事件的名字也是原生的js属性把on去掉,同时绑定的方法必须要在Vue对象的methods属性里面声明和定义
6.表单数据绑定
-
表单绑定 v-model:在表单元素上创建双向数据绑定。
-
双向数据绑定
-
注:
- 表单数据绑定是一个双向数据绑定
- 该属性只能在表单中使用
-
更新 data 数据,页面中的数据也会更新。 更新页面数据,data 数据也会更新。
-
MVVM模型(Model View ViewModel):是 MVC 模式的改进版
在前端页面中,JS 对象表示 Model,页面表示 View,两者做到了最大限度的分离。
将 Model 和 View 关联起来的就是 ViewModel,它是桥梁。
ViewModel 负责把 Model 的数据同步到 View 显示出来,还负责把 View 修改的数据同步回 Model。
-
-
<body> <div id="div"> <form autocomplete="off"> 姓名:<input type="text" name="username" v-model="username"> <br> 年龄:<input type="number" name="age" v-model="age"> </form> </div> </body> <script> new Vue({ el:"#div", data:{ username:"张三", age:23 } }); </script>
-
三. Element-UI
1. 他帮助我们完成了很多的css的布局,把他们都封装成了一个一个的组件,我们开发的时候只需要找到对应的组件,然后复制粘贴修改即可
官网地址:https://element.eleme.cn/#/zh-CN
2. 学习的核心-复制粘贴
3. ElementUI的使用
- 以后使用element-ui的步骤
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script>
- 特别强调: 引入js的时候必须要先引入vue的js然后在引入element-ui的js
4. 常用的组件
-
基础布局
- 基础布局把一行划分为24份,使用span来表示当前的组件需要占用多少份
-
容器布局
- 网页的常规布局,如果现有的布局不能满足你了你就可以使用el-container进行嵌套实现
-
表单组件
-
- 需要知道如何进行数据绑定
-
- 需要知道如何绑定校验规则,如何编写校验规则
-
- 要灵活的应用各个表单组件
-
-
表格
-
导航组件
- 顶部导航
- 侧边栏导航
5.使用技巧
- 注意事项:
- 粘贴后需要自己写 new Veu{}和el:"#div",把var声明验证的变量放在data()大括号内return外。
- 多个方法要放在methods:{}大括号里面,方法和方法之间用“,”逗号隔开。
官网提供的代码:
<script> export default { data() { return { labelPosition: 'right', formLabelAlign: { name: '', region: '', type: '' } }; } } </script>
引入后的代码:
<div id="div" class="loginbox"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" > <el-form-item label="手机号码" prop="phone"> <el-input v-model="ruleForm.phone"></el-input> <el-form-item label="登录密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" ></el-input> </el-form-item> </el-form> </div> <script> //粘贴后需要自己写 new Veu{}和el:"#div",把声明验证变量放在data()大括号内return外 new Vue({ el:"#div", data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } }; return { show: true, // 发送验证码倒计时初始启用按钮 count: '', // 初始化次数 timer: null, ruleForm: { phone: '', pass: '', }, rules: { phone: [ {required: true, message: '请输入手机号', trigger: 'blur'}, ], pass: [ {required: true, message: '请输入密码', trigger: 'blur'}, ] } } //data结尾 }, methods:{ submitForm(formName){ this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } }); }, //下面括号为方法结尾 }, //下面括号为Vue结尾 }); </script>
-