1. Vue的基础代码
<!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>
</head>
<body>
<!--用 Vue new出来的实例会控制这个元素-->
<!-- Vue 实例所控制的区域就是 MVVM 的V-->
<!--new 出来的vm就是MVVM 中的VM ，其中的调度这-->
<div id="app">
<P>{{msg}}</P>
</div>
<script>
//2.创建一个Vue实例
//当我们带入包之后，在浏览器内存中就多了一个Vue构造函数
var vm =new Vue(
{
el:'#app', //表示我们这new的这个Vue要控制的区域
// MVVM 中的M 用来保存数据
data :{
msg:'欢迎学习Vue' //通过Vue的指令，直接把数据渲染到页面上，不在手动操作DON元素
}
}
)
</script>
</body>
</html>
2. c-cloak、c-text、c-html介绍.
<!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>
<style>
/* 解决闪烁问题 */
[v-cloak] {
display:none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>1111{{msg}}1111</p> <!-- 不会覆盖元素中的内容 -->
<h4 v-text="msg">123123</h4> <!-- 会覆盖元素中的123123 -->
<p v-cloak>1111{{msg2}}1111</p> <!-- 不会覆盖元素中的内容 , 只会当做是一个文本-->
<h4 v-text="msg2">123123</h4> <!-- 会覆盖元素中的123123 ,只会当做是一个文本 -->
<h1 v-html="msg2"></h1> <!--会当做是一个html的标签输出-->
<!--v-bind: 吧mytitle当做一个变量，用于绑定Vue中提供与绑定属性的指令 可以直接写成： 也可以在其中写入合法的js表达式-->
<input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show"> <!--可以直接把v-on：写成@-->
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h1>我是一个H1</h1>',
mytitle: '这是一个自己定义的title'
},
methods:{ //在这个属性中定义了当前Vue实例所有可用的方法
show:function(){
alert('HELLO')
}
}
})
</script>
</body>
</html>
3. 走马灯页面效果
<!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>
</head>
<body>
<!-- 要控制的元素-->
<div id="app">
<input type="button" value="嘚瑟起来" @click="start">
<input type="button" value="停" @click="stop">
<h1>{{ msg }}</h1>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
msg:'猥琐发育，别浪--',
intervalid:null
},
methods:{
start(){
if(this.intervalid!=null) return;
/* => 使内部的this指向外部的vn的this*/
this.intervalid = setInterval(() =>{
//console.log(this.msg) /*在VM实例中想要获取data上的数据或者想要调用methods中的方法，必须通过this. 来获取或调用*/
var st =this.msg.substring(0,1)
var end =this.msg.substring(1)
this.msg =end + st
},400)
//注意：vm实例会检讨自己身上的data中的所有数据的改变，只要数据变化就会自动把数据更新倒也没上去
},
stop(){
clearInterval(this.intervalid)
this.intervalid =null
}
}
})
</script>
</body>
</html>
4. 事件修饰符的使用
<!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: blue
}
</style>
</head>
<body>
<div id ="app">
<div class="inner" @click.self="bivHandler">
<!--可以连接到一起使用-->
<!-- <div class="inner" @click.onec="bivHandler"> .once 只触发一次事件-->
<!-- <div class="inner" @click.self="bivHandler"> .selt 只有点击当前元素才会触发事件-->
<!-- <div class="inner" @click.capture="bivHandler"> .capture 实现捕获事件的触发机制 --> .
<!-- <a href="https://123.sogou.com/?121033" @click.prevent="LinkClick">搜搜</a> 阻止默认行为 -->
<!-- <input type="button" value ="使劲戳" @click.stop="btnHandler"> .stop 修饰符 阻止冒泡 -->
<input type="button" value ="使劲戳" @click="btnHandler">
<h4>{{msg}}</h4>
<input type="text" value ="使劲戳" @click="btnHandler" v-model="msg"> <!--v-model 数据双向绑定 互相改变 ，不加model的只能从代码改变页面无法逆向改变-->
</div>
</div>
<script>
var vn=new Vue({
el:'#app',
data:{
msg:'hello'
},
methods:{
bivHandler(){
console.log("这是DIV")
},
btnHandler(){
console.log("这是button")
},
LinkClick(){
console.log("这是a")
}
}
})
</script>
</body>
</html>
扫一扫
1493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
