一.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>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{}}差值表达式 -->
<!-- 差值表达式里面可以进行简单的运算 -->
<!-- 浏览器能解析哪些东西 -->
<!-- html css javascript -->
{{msg}}
{{flag?'我是true':'我是false'}}
{{num*2}}
</div>
<script>
let app = new Vue({
el:"#app",//挂载点
data:{//初始化数据
msg:"hello world",
flag:true,
num:22
}
})
</script>
</body>
</html>
二.v-cloak
<!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>
<div id="app">
<div v-cloak>
{{msg}}
</div>
</div>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
msg:"Hello world"
}
})
</script>
</body>
</html>
三.v-text和v-html、v-pre、v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
{{msg}}
</div>
<div v-text="msg"></div>
<div v-text="content"></div>
<div>{{content}}</div>
<!-- v-html接收富文本内容 -->
<div v-html="content"></div>
<!-- 跳过编译过程-->
<div v-pre>{{msg}}</div>
<!-- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】 -->
<div v-once>v-once{{msg}}</div>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:"我是文本内容",
content:"<h2>我是H2标签</h2>"
}
})
</script>
</body>
</html>
四.v-model的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model数据双向绑定 -->
<!-- 数据双向绑定 -->
<!-- 视图发生变化 数据也会发生变化 -->
<!-- 数据发生变化 视图也会发生变化 -->
<input type="text" placeholder="请输入你的姓名" v-model="msg">
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:""
}
})
</script>
</body>
</html>
五.事件的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<!-- 点击事件 -->
<!-- <div v-on:click="shijianming">点击事件触发按钮</div> -->
<!-- v-on:简写@ -->
<!-- 如果方法不需要传参的时候 加不加括弧都行 要传参必须加（）-->
<button @click="shijianming">点击事件触发按钮</button>
<!-- <button @click="fun()">点击事件进行传参--空</button> -->
<button @click="fun">点击事件进行传参--空</button>
<button @click="fun1(1,2,$event)">点击事件进行传参--有参</button>
<button @click="changeMsg">修改msg</button>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:"初始化数据"
},
// 方法写在methods里面
methods:{
//
shijianming(){
console.log('点击事件执行了嘛')
},
fun(e){
console.log('e我是事件对象',e)
console.log("我是fun方法")
},
fun1(a,b,e){
console.log('a',a)
console.log('b',b)
console.log('e',e)
},
changeMsg(){
// this代表当前页面的vue实例
console.log('this',this)
this.msg ='帅哥'
}
}
})
</script>
</body>
</html>