<!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>vueStudy</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="css/vueTest.css" />
</head>
<body>
<!--vue实例所控制的这个元素区域，就是V-->
<div id="app">
<h1 class="red thin">dadadadadadeh1</h1>
<h1 :class="['thin','italic']">dadadadadadeh1</h1>
<h1 :class="['thin','italic',flag?'active':'']">dadadadadadeh1</h1>
<h1 :class="['thin','italic'，{'active':flag}]">dadadadadadeh1</h1>
<!--使用v-cloak能够解决插值表达式闪烁的问题 直接引用data里的msg
<p id="content" v-cloak>234234{{ msg }}3523545</p> -->
<!-- v-text & v-html 默认v-text没有闪烁问题；v-text会覆盖标签里的内容
<h4 v-text="msg">=====</h4>
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div> -->
<!-- title mytitle -->
<input type="button" value="按钮" title="123">
<!--v-bind是vue中，提供的用于绑定属性的指令-->
<input type="button" value="按钮" v-bind:title="mytitle">
<!--因为绑定后，mytitle被当成了一个变量，可以写成表达式-->
<input type="button" value="按钮" v-bind:title="mytitle +'5555555'">
<!-- v-bind： 也可以简写成 ： 例：<input type="button" value="按钮" :title="mytitle"> -->
<!--v-on:绑定事件； v-on:click/mouseover/mouseout....--><!--v-on可缩写为@
<input type="button" value="按钮" :title="mytitle" v-on:click="show"> -->
<!-- .prevent 阻止默认行为
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题上百度</a>
.prevent阻止默认行为 例：表单的submit事件 ;a标签的href事件-->
<!-- 使用 .capture 实现捕获触发事件的机制（一般情况下位冒泡机制，从里到外），从外到里
<div class="inner" @click.capture = "divHandler">
<input type="button" value="ddd" @click="btnHandler">
</div>-->
<!-- 使用 .self实现只有点击当前元素的时候才会触发事件处理函数
<div class="inner" @click.self = "divHandler">
<input type="button" value="ddd" @click="btnHandler">
</div>-->
<!-- 可串联，once表示只触发一次
<a href="http://www.baidu.com" @click.prevent.once ="linkClick">有问题上百度</a>-->
<!-- 演示： .stop 与 .self 的区别 ：.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为
.self：btn + outer ;.stop：btn + inner
<div class="outer" @click="div2Handler">
s<div class="inner" @click.stop="divHandler">
<input type="button" value="ddd" @click="btnHandler">
</div>
</div>-->
<!-- v-model 双向数据绑定 v-bind只能实现数据的单项绑定，从 M层绑定到 V层
使用 v-model 可以实现表单元素和 Model中数据的双向数据绑定
<h4> {{msg}} </h4>
<input type="text" v-bind:value="msg" style="width: 50%">
<input type="text" v-model="msg">-->
<!-- vue 中样式 ：class
第二种使用方式，直接传递一个数组，但是用处较小 注意：这里的 class需要使用 v-bind做数据绑定
第三种在数组中使用三元表达式，，但是代码量比较多 不好读
第四种 在数组中使用对象来代替三元表达式，提高代码可读性
-->
</div>
<script>
//new 出来的这个vm对象就是 MVVM 中的VM调度者
var vm = new Vue({
el: '#app',
//el表示element；当前我们new的这个vue实例，要控制页面上的哪个区域
//data就是 MVVM 中的M，专门用来保存每个页面数据的
data:{//data属性中，存放的是el中要用到的 数据
msg:' 学习Vue HAHAHAHA', //通过vue提供的指令，很方便的能把数据渲染在页面上，程序员不再手动操作 DOM 元素了
msg2:'<h1>hhhhhhhhhhh</h1>',
mytitle:'这是一个自己定义的title',
flag:true,
},
methods:{//这个methods属性中定义了当前vue实例所有可用的方法
show: function(){
alert('lalalallalala')
},
linkClick: function(){
console.log('触发了链接的点击事件')
},
btnHandler(){
console.log('这是触发了btn按钮的点击事件')
},
divHandler(){
console.log('这是触发了innerdiv的点击事件')
},
div2Handler(){
console.log('这是触发了outerdiv的点击事件')
}
}
})
</script>
</body>
</html>
12-28
1117
1117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
