（Sjran）vue.js第一天记录-CSDN博客

本文链接：https://blog.csdn.net/qq_45506707/article/details/98894098

<!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-2.4.0.js"></script>
</head>

<body>

  <div id="app">
    <p>{{ msg }}</p>           //用户所看到的界面
  </div>                       


  <script> 
    var vm = new Vue({
      el:'#app',
      data:{                            //具体控制上面的APP
        msg:'欢迎学习vue'
      }
    })
  </script>
</body>

</html>

以上为最初的“hello world”代码
知识点：

v-cloak：

v-cloak：解决闪烁问题

v-text:
使用范例：<h4 v-text="msg"></h4>
效果等于上述 <p>{{ msg }}</p>
但是v-text 没有闪烁问题
v-text会覆盖元素中原本的内容

v-html:

msg1:'<h1> hello world </h1>'
 作用让<h1></h1>此类显示

v-bind:

<input type="button" value="按钮" v-bind:title="mytitle">
 <input type="button" value="按钮" :title="mytitle">
:title=v-bind:title

绑定属性值

v-on:

<input type="button" value="按钮" v-bind:title="mytitle+'helo'" v-on:click="show">
<input type="button" value="按钮" v-bind:title="mytitle+'helo'" @click="show">
<input type="button" value="按钮" v-bind:title="mytitle+'helo'" @mouseover="show">鼠标覆盖方法

两种写法相同
使用之前需要写方法
methods:{
        show:  function(){
          alert('hello')
        }
      }