<!-- 1. 如何定义一个基本的Vue代码结构 -->
<!-- 2. 插值表达式 和 v-text -->
<!-- 3. v-cloak -->
<!-- 4. v-html -->
<!-- 5. v-bind Vue提供的属性绑定机制 缩写是 : -->
<!-- 6. v-on Vue提供的事件绑定机制 缩写是 @ -->
<!-- 7. 定时器-->
01.hello_world
<!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="./lib/vue.js"></script>
</head>
<body>
<!-- 将来new 的 vue实例，会控制这个元素中的所有内容 -->
<!-- vue 实例所控制的这个元素区域，就是我们的 V-->
<div id="app">
<p id="content">{{msg}}</p>
</div>
<script>
// 2.创建一个Vue的实例
// 当我们导入包之后,在浏览器的内存中,就多了一个 Vue 的构造函数
// new 出来的这个vm对象就是我们 MVVM中的 VM调度者
var vm = new Vue({
el:'#app', //表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
//这里的 data 就是 MVVM中的 M，专门用来保存每个页面的数据
data:{//data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习Vue' //通过 Vue 提供的指令,很方便的就能把数据渲染到页面上，
//不需要再操作DOM元素了
}
})
</script>
</body>
</html>02.v-bind 指令是vue中,提供用于绑定属性的指令
<!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>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- vue 实例所控制的这个元素区域，就是我们的 V-->
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题-->
<p v-cloak>++++++ {{ msg }} ------</p>
<h4 v-text="msg">========</h4>
<!-- 默认 v-text 是没有闪烁问题的-->
<!-- v-text会覆盖元素中原本的内容,但是,插值表达式 只会替换自己的占位符,
不会把整个元素的内容清空-->
<div >{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">234234</div>
<input type="button" value="按钮" title="mytitle"/>
<!-- v-bind 是vue中,提供用于绑定属性的指令 -->
<input type="button" value="按钮" v-bind:title="mytitle"/>
<!-- v-bind 中可以写合法的JS表达式 -->
<input type="button" value="按钮" v-bind:title="mytitle + '123'"/>
<!-- 这里的:就相当于 v-bind: 是简写形式-->
<input type="button" value="按钮" :title="mytitle + '123'"/>
</div>
<script src="./lib/vue.js"></script>
<script>
var vm =new Vue({
el:'#app',
data:{
msg: '123',
msg2: '<h1>哈哈哈哈</h1>',
mytitle: '这是自己定义的一个title'
}
})
</script>
</body>
</html>03.v-on: 事件绑定机制
<!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>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- vue 实例所控制的这个元素区域，就是我们的 V-->
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题-->
<p v-cloak>++++++ {{ msg }} ------</p>
<h4 v-text="msg">========</h4>
<!-- 默认 v-text 是没有闪烁问题的-->
<!-- v-text会覆盖元素中原本的内容,但是,插值表达式 只会替换自己的占位符,
不会把整个元素的内容清空-->
<div >{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">234234</div>
<input type="button" value="按钮" title="mytitle"/>
<!-- v-bind 是vue中,提供用于绑定属性的指令 -->
<input type="button" value="按钮" v-bind:title="mytitle"/>
<!-- v-bind 中可以写合法的JS表达式 -->
<input type="button" value="按钮" v-bind:title="mytitle + '123'"/>
<!-- 这里的:就相当于 v-bind: 是简写形式-->
<input type="button" value="按钮" :title="mytitle + '123'"/>
<!-- Vue 中提供了 v-on: 事件绑定机制 -->
<input type="button" value="按钮" :title="mytitle" v-on:click="show">
<input type="button" value="按钮" @click="show">
</div>
<script src="./lib/vue.js"></script>
<script>
var vm =new Vue({
el:'#app',
data:{
msg: '123',
msg2: '<h1>哈哈哈哈</h1>',
mytitle: '这是自己定义的一个title'
},
methods:{// 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
}
}
})
</script>
</body>
</html>04.定时器+跑马灯效果
<!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>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- vue 实例所控制的这个元素区域，就是我们的 V-->
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h4>{{ msg }}</h4>
</div>
<script src="./lib/vue.js"></script>
<script>
// 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，
// 必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象
var vm =new Vue({
el:'#app',
data:{
msg: '猥琐发育，别浪~~！',
intervalId:null // 在data上定义 定时器Id
},
methods:{// 这个 methods属性中定义了当前Vue实例所有可用的方法
lang: function () {
if (this.intervalId != null) return;
//第一种方法
//var _this = this
//setInterval(function(){
// 获取到头的第一个字符
//var start = _this.msg.substring(0, 1)
// 获取到 后面的所有字符
//var end = _this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给 _this.msg
//_this.msg = end + start
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，
// 从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
// },400)
//第二种方法
this.intervalId = setInterval(() => {
// 获取到头的第一个字符
var start = this.msg.substring(0, 1)
// 获取到 后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给 this.msg
this.msg = end + start
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，
// 从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
},400)
},
stop: function(){// 停止定时器
clearInterval(this.intervalId)
// 每当清除了定时器之后，需要重新把 intervalId 置为 null
this.intervalId = null
}
}
})
// 分析：
// 1. 给 【浪起来】 按钮，绑定一个点击事件 v-on @
// 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，
// 把 第一个字符截取出来，放到最后一个位置即可；
// 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；
</script>
</body>
</html>05.事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: darkcyan;
}
.outer {
padding: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 冒泡机制 点击字标签的click后,之后会把父节点的click触发 -->
<!-- 使用 .stop 阻止冒泡 只执行自己的-->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->
<!-- 使用 .prevent 阻止默认行为 -->
<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> -->
<!-- 捕获机制 从外到里 执行click命令 -->
<!-- 使用 .capture 实现捕获触发事件的机制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<!-- <div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .once 只触发一次事件处理函数 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->
<!-- 演示： .stop 和 .self 的区别 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
<!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div> -->
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
},
linkClick() {
console.log('触发了连接的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件')
}
}
});
</script>
</body>
</html>
1353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
