1 使用Vue框架
<body>
<div id="app">
</div>
<!-- 使用vue 框架 引入vue -->
<script src="./vue.js"></script>
<script>
// new 创建 Vue框架 也可以理解为将vue框架实例化 V必须大写
//对象 object 是键值对存值
new Vue({
el: '#app',//必须要写el挂载点将vue框架给谁用
data: {//数据源 存数据用的对象
//将数据渲染到页面上
name: "我叫景明", //字符串类型
age: 18
}
})
</script>
</body>
2 内容渲染指令 {{}}
<body>
<div id="app">
<!-- 在绑定的el挂载点 #标签里 写上2个 {{}} -->
<!-- 这个2个{{}}中间 写渲染的对象 -->
{{name}}
{{age}}
我是{{name}},我今年{{age}}岁
</div>
<!-- 使用vue 框架 引入vue -->
<script src="./vue.js"></script>
<script>
// new 创建 Vue框架 也可以理解为将vue框架实例化 V必须大写
//对象 object 是键值对存值
new Vue({
el: '#app',//必须要写el挂载点将vue框架给谁用
data: {//数据源 存数据用的对象
//将数据渲染到页面上
name: "景明", //字符串类型
age: 18
}
})
</script>
</body>
3 双向绑定指令--作用：表单绑定v-model
# <!-- 语法 -->
<div id="app">
<input type="text" v-model="value">
<div>{{value}}</div>
</div>
<!-- js data: { value:"" //绑定数据源 } -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fun {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 想获取输入框的内容 就需要用双向数据绑定 -->
<!-- 将输入的内容 通过v-model 存到数据源value中去 -->
<input type="text" v-model="value">
<!-- 证明 -->
{{value}}
</div>
<!-- 1.引入vue框架 只有引入成功了 才能继续 -->
<script src="vue.js"></script>
<!-- 使用vue框架 -->
<script>
// 创建vue框架
new Vue({
el: "#app",//挂载点
data: {//数据源
message: "hello Vue!",
value: ""
}
})
</script>
</body>
</html>
4.事件绑定指令 @click绑定
<!-- 语法 -->
<!-- <div id="app">
<button @click="clickMoney">点击+1</button>
<h2>我的money：{{money}}</h2>
</div> -->
<!-- methods：定义属于Vue实例的自定义方法, 专门写事件的地方。 -->
<!-- <script>
let app = new Vue({
el: "#app",
data: {
money: 0
}, methods: {
clickMoney() {
// 需要用this来从data数据源中找到这个数据
this.money++
}
},
})
</script> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fun {
color: red;
}
</style>
</head>
<body>
<div id="app">
{{message}}
<!-- @click 点击事件 -->
<button @click="a">按钮</button>
<button @click="b">点击改变内容</button>
</div>
<!-- 1.引入vue框架 只有引入成功了 才能继续 -->
<script src="vue.js"></script>
<!-- 使用vue框架 -->
<script>
// 创建vue框架
new Vue({
el: "#app",//挂载点
data: {//数据源
message: "hello Vue!",
value: ""
},
methods: {//事件源
// 写第一个事件
a() {
// 在事件a里面写上你要做什么事情
alert("这是第一个事件")
},
b() {//方法b 我想改变的是数据源message的内容
// 通过this.message 数据源的message
this.message = "床前明月光，疑是地上霜"
}
}
})
</script>
</body>
</html>
我们需要多少个事件就可以在methods中写多少个函数 如果需要使用就使用@click进行一个绑定
5.条件渲染指令 可以让内容进行一个显示和隐藏
<!-- 语法 可以让内容进行一个显示和隐藏-->
<!-- v-if 根据条件动态的插入或移除元素，元素的存在与否取决于条件的真假。当条件为真时，元素将
被渲染到DOM中，当条件为假时，元素将从DOM中移除 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="clickFlag">点击可以显示和隐藏</button>
<h2 v-if="flag">我绑定了v-if 可以通过点击按钮让我显示或掩藏</h2>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
flag: true
}, methods: {
clickFlag() { //事件叫clickFlag
this.flag = !this.flag
}
},
})
</script>
</body>
</html>
<!-- v-show 用于根据条件来显示或隐藏元素。它基于CSS的display属性进行切换，元素仍然存在于
DOM中，只是通过设置display属性开控制其可见性。如果条件为真，元素将显示，如果条件为
假，元素将隐藏 -->
<div id="app">
<button @click="clickFlag">点击可以显示和隐藏</button>
<h2 v-show="flag">我绑定了v-show 可以通过点击按钮让我显示或掩藏</h2>
</div>
<script>
let app1 = new Vue({
el: "#app",
data: {
flag: true
}, methods: {
clickFlag() { //事件叫clickFlag
this.flag = !this.flag
}
},
})
</script>
<!-- v-show和v-if的区别：
v-show是通过css diaplay：none来显示和隐藏
v-if是通过删除和添加dom元素 来显示和隐藏 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fun {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 你要让谁隐藏那就把指令给谁 当条件不成立就会隐藏-->
<!-- 这个值不灵活 如何让值变得更灵活-->
<!-- 同胞兄弟 叫v-show -->
<!-- v-if 和 v-show 效果没有区别-->
<!-- v-if 删除标签 添加标签-->
<!-- v-show 通过css style="display: none;的属性来控制删除和隐藏-->
<!-- 什么时候用 v-show 什么时候用 v-if-->
<!-- v-if更耗性能 用的少的时候用v-if -->
<!-- v-show 用的多的时候 用v-show -->
<div class="fun" v-show="flag"></div>
<button @click="a">点击显示和隐藏</button>
</div>
<!-- 1.引入vue框架 只有引入成功了 才能继续 -->
<script src="vue.js"></script>
<!-- 使用vue框架 -->
<script>
// 创建vue框架
new Vue({
el: "#app",//挂载点
data: {//数据源
flag: true//只要改变flag这个变量就能让盒子显示和隐藏
},
methods: {//事件源
a() {
// this.flag = false
// 我想点了隐藏 再点就显示这个怎么做？
// 能不能一行搞定
// if(this.flag == true){//如果数据源flag等于true
// this.flag = false//那我就让值变成false
// }else{
// this.flag = true
// }
// 只有两个值
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
6列表渲染指令 v-for
<!-- v-for key：唯一标识符 不加上不会报错 加上会提升性能 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入vue框架 只有引入成功了 才能继续 -->
<script src="./vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- {{list}} -->
<!-- v-for列表渲染语句 -->
<!-- :key 唯一标识符 不加上不会报错 加上会提升性能 -->
<!-- 通常最好使用唯一的，不会变的标识符，如item.id -->
<div class="fun" v-for="item in list" :key="item.id">
{{item.name}}
{{item.age}}
</div>
</div>
<!-- 使用vue框架 -->
<script>
// 创建vue框架
new Vue({
el: "#app",//挂载点
data: {//数据源
list: [//这个格式的值非常常见 数组对象
{
id: 1,
name: "景明",
age: 18
},
{
id: 2,
name: "景明1",
age: 20
},
{
id: 3,
name: "景明3",
age: 21
},
]
},
methods: {//事件源
}
})
</script>
</body>
</html>
7 案例练习
设计一个按钮
在数据源定义一个数据value，并将value渲染到页面
并给按钮一个事件，每次点击按钮都让value的值加10
当value的值等于30我们就让value的值隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<div v-if="flag">{{value}}</div>
<button @click="a">按钮</button>
</div>
<!-- 1.引入vue框架 只有引入成功了 才能继续 -->
<script src="vue.js"></script>
<!-- 使用vue框架 -->
<script>
// 创建vue框架
new Vue({
el: "#app",//挂载点
data: {//数据源
value: 0,
flag: true
},
methods: {//事件源
a() {
this.value += 10 // 让这个值累加10
if (this.value == 30) {//如果value等于30那就让this.flag = false
this.flag = false
} else {
this.flag = true // 不等于30就显示
}
}
}
})
</script>
</body>
</html>