Vue笔记

vue 笔记一

Hello Word 实例

<div id="app">
    <p>{{details()}}</p>
 	<p>{{ message }}</p>
 	<p>{{ site }}</p>
 	<p>{{url }}</p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message: "Hello Word!",
            site: "CSDN",
            url:"www.baidu.com"
        },
        methods: {
            details: function() {
                return  this.message+ " 第一个实例";
            }
        }
    })
</script>

{{ }}

{{ }} 用于输出对象属性和函数返回值

el

是 DOM 元素中的 id。在上面实例中 id 为 app，在 div 元素中:

<div id = "app"></div>

data

用于定义属性，实例中有三个属性分别为：message, site , url。

v-model 指令

用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

v-html 指令

使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

v-bind 指令

HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

// An highlighted block
var foo = 'bar';