MVC服务器架构
MVVC前端(View模块)架构
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="application/javascript" src="./lib/vue.js"></script> </head> <body> <div class="root"> <p>{{ msg }}</p> <h4 v-text="msg"></h4> <h4 v-html="msg2"></h4> <input :title="mytitle + '12'" @click="hello" type="button" value="按钮"> </div> <script> let vm = new Vue({ el: '.root', data: { msg: "welcome", msg2: "<h1>111</h1>", mytitle : "123123", }, methods: { hello: function (){ alert(1) } } }) </script> </body> </html>
事件修饰符
@click.stop
.stop 阻止向外冒泡
.self 仅仅阻止本身冒泡事件,冒泡继续
.prevent 阻止默认事件
.once 事件只触发一次 顺序不影响作用
.capture 开启捕获模式,从外向里冒泡
在vue中使用class样式
1.数组
:class="['a','b']"
2.数组+三元操作符
3.数组+对象
:class="['a',{'b':true}]"
4.对象
可以把对象放在data里
在vue中使用style
:style="color: red;"
把对象放在data里
可以用数组放多个对象