特点:易用、灵活、性能佳
Vue核心对象:每一个Vue程序都是从Vue核心对象开始的
let vm=new Vue({
选项列表;
})
1.导包
下载和引入vue.js文件
2.编写入门程序。
视图:负责页面渲染主要由HTML+CSS构成
脚本:负责业务数据模型(model)以及数据的处理逻辑
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:"hello Vue"
}
});
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">div1div>
<div v-else-if="num%3==1">div2div>
<div v-else="num%3==2">div3div>
<div v-show="flag">div4div>
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()">testbutton>
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:网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库
使用Element前提必须要有Vue
组件:组成网页的部件,例如 超链接、按钮、图片、表格等等
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>