VUE基础学习

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里

可以用数组放多个对象