Vue
- Vue是一套构建用户界面的渐进式前端框架
- 只关注视图层，并且非常容易学习，还可以很方便的与其他库或已有项目整合。
- 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
特点：易用、灵活、性能佳
快速入门
Vue核心对象：每一个Vue程序都是从Vue核心对象开始的
let vm=new Vue({
选项列表；
})1.导包
下载和引入vue.js文件
2.编写入门程序。
视图：负责页面渲染主要由HTML+CSS构成
脚本：负责业务数据模型（model）以及数据的处理逻辑
Vue参数
- el： 用于接收获取到页面中的元素。（根据常用选择器获取）
- data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
- methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象
指令介绍
指令：是带有v-前缀的特殊属性，不同指令具有不同含义。例如v-html,v-if
使用指令时，通常编写在标签的属性上，值可以使用JS的表达式
指令 | 作用 |
v-html | 把文本解析为HTML代码 |
v-bind | 为HTML标签绑定属性值 |
v-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
v-else | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
v-else-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
v-show | 根据条件展示某元素，区别在于切换的时display属性的值 |
v-for | 列表渲染，遍历容器的元素或者对象的属性 |
v-on | 为HTML标签绑定事件 |
v-model | 在表单元素上创建双向数据绑定 |
文本插值
v-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>hello Vue</b>"
}
});
</script>绑定属性
<body>
<!-- 视图 -->
<div id="div">
<a v-bind:href="url">百度一下</a>
<br>
<a :href="url">百度一下</a>
<br>
<div :class="cls"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
url:"www.baidu.com",
cls:"my"
}
});
</script>条件渲染
<body>
<div id="div">
<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 v-show="flag">div4</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
num:1,
flag:true
}
})
</script>列表渲染
v-for:列表渲染，遍历容器的元素或者对象的属性
<li v-for="name in names">
{{name}}
</li>v- for 在哪个标签下，循环的就是哪个标签。循环获取的值是names
事件绑定
<body>
<!-- 视图 -->
<div id="div">
<div>{{name}}</div>
<button v-on:click="change()">改变div的内容</button>
<button v-on:dblclick="change()">改变div的内容</button>
<button @click="change()">简写改变</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
name:"黑马程序员"
},
methods:{
change(){
this.name="传智播客"
}
}
});
</script>表单绑定
v-model:在表单元素上创建双向数据绑定。
双向数据绑定：更新data数据，页面中的数据也会更新，更新页面数据，data数据也会更新，是指内存中更新，不是直接修改了代码
<body>
<!-- 视图 -->
<div id="div">
<form autocomplete="off">
姓名：<input type="text" name="username" v-model="username">
年龄：<input type="number" name="age" v-model="age">
</form>
<button @click="getUsername()">test</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
username:"张三",
age:24
},
methods:{
getUsername(){
console.log(this.username+this.age)
}
}
});
</script>Element 基本使用
element:网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库
使用Element前提必须要有Vue
组件：组成网页的部件，例如 超链接、按钮、图片、表格等等
Element快速入门
1.下载Element核心库
2.引入Element样式文件
3.引入Vue核心js文件
4.引入Element核心js文件
<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>5.编写按钮标签
6.通过Vue核心对象加载元素
在element官网中挑选我们想使用的组件
点击显示代码
直接复制粘贴想用的使用即可
<div id="div">
<el-button type="success" plain disabled>成功按钮</el-button>
</div>
</body>
<script>
new Vue({
el:"#div"
})
</script>
