vue入门

基本语法

创建入门

<!--创建绑定-->
<div id="app1">
    <p>{{ message }}</p>
</div>

<script>
<!--  创建vue格式  -->
    new Vue({
    //    绑定上面容器
        el:'#app1',
        // date 函数
        data:{
            //message 方法
            message: "第一个vue程序"
        }
    })
</script>

v-band语法

v-band有一种简单写法，:

<div id="app">
    <p>site:{{site}}</p>
    <a :href="url1">url</a>
    <hr>
    <span :title="message">aaaaaa</span>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message:'hhhhh',
            site: "小白学Java",
            url1: 'https://i.cnblogs.com/'
        },
        methods: {
            details: function () {
                return "小白努力学习";
            }
        }
    })

v-if

<div id="app">
<!--    <h1 v-if="ok">yes</h1>-->
<!--    <h1 v-else>no</h1>-->

    <!--  注意细节 A是字符 -->
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            // ok:true
            type:'A'
        }
    })
</script>

v-for

<div id="app">
    <li v-for = "item in items">
        {{item.message}}
    </li>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            // 数组使用中括号
            items:[
                //
                {message:"小白学vue"},
                {message:"小白学Java"}
            ]
        }
    })

v-on

<div id="app1">
    <p>{{ message }}</p>
    <button v-on:click = "sayHi()">adf</button>
</div>

<script>
    new Vue({
        el:'#app1',
        data:{
            message: "第一个vue程序"
        },
        // 方法必须定义在Vue 中的method中
        methods:  {
            sayHi: function (){
                alert("hi")
            }
        }
    })