Vue.js-02：新手村的试炼 - 新世界的武器（指令…

 1 <div id="app">
 2     <p>{{msg}}</p>
 3 </div>
 4 
 5 <script src="../lib/vue.js"></script>
 6 
 7 <script>
 8     new Vue({
 9         el: '#app',
10         data: {
11             msg: 'hello world'
12         }
13     });
14 </script>

<!-- 添加 v-vloak 样式 -->
<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <!-- 添加 v-vloak 指令 -->
    <p v-cloak>{{msg}}</p>
</div>

 1 <div id="app">
 2 
 3     <p>+++++++++ {{msg}} -----------</p>
 4     <p v-text="msg">=================</p>
 5     <p v-text="msgHtml">==============</p>
 6     
 7     <p v-html="msgHtml">============</p>
 8 
 9 </div>
10 
11 <script>
12     new Vue({
13         el: '#app',
14         data: {
15             msg: 'hello world',
16             msgHtml: '<h3 style="color:green">I want to learn vue.js</h3>'
17         }
18     });
19 </script>

 1 <div id="app">
 2     <!-- 
 3         v-bind：可以用来在标签上绑定标签的属性和样式，对于绑定的内容，可以对该内容进行编写合法的 js 表达式
 4             可以简写为 :要绑定的内容
 5      -->
 6     <!-- <input type="button" value="按钮" v-bind:title="msgTitle + 'lalala'" v-bind:style="{color:colorStyle,width:widthStyle+'px'}"> -->
 7 
 8     <!-- 使用 : 简写 -->
 9     <input type="button" value="按钮" :title="msgTitle + 'lalala'" :style="{color:colorStyle,width:widthStyle+'px'}">
10 </div>
11 
12 <script>
13 new Vue({
14     el: '#app',
15     data: {
16         msgTitle: '这是我自定义的title属性',
17         colorStyle: 'red',
18         widthStyle: '120'
19     }
20 });
21 </script>

<input type="button" value="点我啊~~~" id="btn">

<script>
    // 传统的事件绑定方法
    document.getElementById('btn').onclick = function () {
        alert('传统的事件绑定方法');
    }
</script>

<input type="button" value="点我啊~~~" id="btn" v-on:click="alert(1111)">

 1 <input type="button" value="点我啊~~~" id="btn" v-on:click="handlerClick">
 2 
 3 <!-- 使用 @ 简写 -->
 4 <input type="button" value="点我啊~~~" id="btn" @click="handlerClickWithParam(1)">
 5 
 6 var vm = new Vue({
 7     el: '#app',
 8     data: {
 9         msgTitle: '这是我自定义的title属性',
10         colorStyle: 'red',
11         widthStyle: '120'
12     },
13     methods: {//在 methods 中定义当前 vue 实例的所有可访问方法
14         handlerClick() {
15             alert('我是使用 v-on 指令绑定的事件');
16         },
17          handlerClickWithParam(id) {
18             alert('我是使用 v-on 指令绑定的事件，方法参数为'+id);
19         }
20     }
21 });

<div id="app">
    <h3>{{ msg }}</h3>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '你好啊，hahaha'
        }
    });
</script>

<div id="app">
    <h3>{{ msg }}</h3>

    <input type="text" name="" id="" v-model:value="msg">
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '你好啊，程十六'
        }
    });
</script>

 1 <div id="app">
 2     <input type="button" value="切换" @click="handlerClick">
 3 
 4     <h3 v-if="flag">我是通过 v-if 指令控制的~~~</h3>
 5     <h3 v-show="flag">我是通过 v-show 指令控制的~~~</h3>
 6 </div>
 7 
 8 <script>
 9     var vm = new Vue({
10         el: '#app',
11         data: {
12             flag: true
13         },
14         methods: {
15             handlerClick() {
16                 this.flag = !this.flag;
17             }
18         }
19     });
20 </script>

 1 <div id="app">
 2     <!-- 1、循环数组数据 -->
 3     <p v-for="(item,index) in arrayList" :key="index">数组索引值: {{ index }} , 数据值: {{ item }}</p>
 4 </div>
 5 
 6 <script>
 7     var vm = new Vue({
 8         el: '#app',
 9         data: {
10             arrayList: [12, 20, 34, 1, 6]
11         }
12     });
13 </script>

 1 <div id="app">
 2      <!-- 2、循环对象数组数据 -->
 3     <input type="radio" name="" id="">
 4     <p v-for="(item,index) in objList" :key="index">数组索引值: {{ index }} , id: {{ item.id }} , name: {{ item.name }} , age: {{ item.age }}</p>
 5 </div>
 6 
 7 <script>
 8     var vm = new Vue({
 9         el: '#app',
10         data: {
11             objList: [
12                     {id: 1,name: 'zhangsan',age: 23},
13                     {id: 2,name: 'lisi',age: 32},
14                     {id: 3,name: 'wangwu',age: 22},
15                 ]
16         }
17     });
18 </script>

<div id="app">
    <!-- 2、循环对象数组数据 -->
    <input type="radio" name="" id="">
    <p v-for="(item,index) in objList" :key="item.id">数组索引值: {{ index }} , id: {{ item.id }} , name: {{ item.name }} , age: {{ item.age }}</p>
</div>

<div id="app">
    <!-- 3、遍历对象 -->
    <p v-for="(value,key,index) in obj" :key="key">键名: {{ key }} , 值: {{ value }} , 索引值: {{ index }}</p>

    <!-- 4、遍历数字 -->
    <p v-for="item in 10" :key="item">{{ item }}</p>

    <!-- 5、遍历字符 -->
    <p v-for="item in 'chengshiliu'" :key="item">{{ item }}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            obj: {
                    id: 1,
                    name: 'chengshiliu',
                    age: 17
                }
        }
    });
</script>