Vue学习-第一天

Vue概述

一、第一个 hello world

首先在Vue官网上下载 Vue.js 文件

<div id="app">
        <p>{{msg}}</p>
        <!-- 将数据填充到HTML标签中 -->
        <p style="color: yellow;">{{msg}}</p>
        
    </div>
<script src="./vue.js"></script>
<script>
        var myVue = new Vue({
            // el: 元素的挂载位置（可以是css选择器或者DOM元素）
            el: "#app", 
            // data：模型数据（值是一个对象） 
            data: {
                msg: "hello world"
            }
        })
    </script>

这样，一个简单的“hello world”就出现了。

二、指令

接着Vue的特色-数据双向绑定。也就是数据模型(model)与视图(view)组件的协同。
这里就引出了指令的概念，指令 (Directives) 是带有 v- 前缀的特殊 attribute。

// 此时的代码如下
<div id="app">
        // v-model
       <input type="text" v-model="msg">
       <div>{{msg}}</div>
</div>
<script src="./vue.js"></script>
<script>
        var myVue = new Vue({
            el: "#app", 
            data: {
                msg: " "
            }
        })
    </script>

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。v-bind 指令可以用于响应式地更新 HTML属性：

//  href 是参数，通知 v-bind 指令将该元素的 href 属性 与表达式 url 的值绑定
// v-bind 缩写成  :
<a v-bind:href="http://www.baidu.com"></a>

还有一个 v-on 指令，它用于监听 DOM 事件：

// click代表事件 ， handle代表函数
// v-on 缩写成 @
// 1.如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
// 2.如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是
<button v-on:click="handle">click</button>
<button v-on:click="handle1(1, 2, $event)">click</button>

<script src="./vue.js"></script>
<script>
        var myVue = new Vue({
            el: "#app", 
            data: {
                num: 0,
            },
            methods: {
                handle: function(){
                    // 这里的this是 myVue的实例对象                
                    console.log(this == myVue);
                },
                handle1: function(p, p1, event){
                  console.log(event.target.innerHTML);  
                }
            },
        })
    </script>

还有一些分支 结构
v-if、v-else if、v-else

// 相当于 if
<div v-if="score >= 90"></div>
// 相当于 else if
<div v-else-if="score >= 80 && score < 90">中</div>
// 相当于 else 
<div v-else>差</div>

最后一个 遍历使用 v-for

        <div id="app">
        <li v-for="(item,index) in numbers" :key1="index">{{item.date}}</li>
        </div>
<script src="./vue.js">
<script>
        var myVue = new Vue({
            el: '#app',
            data: {
                number: ['第一个', '第二个', '第三个', '第四个', '第五个'],
                numbers: [{
                    name: 1,
                    date: 'sunday'
                },{
                    name: 2,
                    date: 'tuesday'
                },{
                    name: 3,
                    date: 'wednesday'
                }]
            },
        })
    </script>