Vue使用

    <div id="app">
        <h1>{{ message + "你好" }}</h1>              <!-- {{ }} 标签内容 -->
        <img :src="url" alt="" width="200px">           <!-- :绑定属性 -->
        <button @click="sayHi">测试按钮</button>        <!-- @绑定事件 -->
        <button @click="changeImg">切换图片</button>
    </div>
    
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 创建 Vue 实例
        new Vue({
	        el:"#app",      // 作用范围
	        data:{			// 一些数据
	            message:"Hello Vue",
	            url:"../html/1.jpg",
	            school:{
	                name:"你好 小黑！",
	                mobile:"400-618-9090"
	            },
	            campus:["北京校区","上海校区","广州校区","深圳校区"]
	        },
            methods:{			// 一些 方法
                sayHi(){
                    alert('hi');
                },
                changeImg(){        // this 指向 Vue 实例
                    if(this.url == '../html/1.jpg'){
                        this.url="../html/2.jpg";
                    }else{
                        this.url="../html/1.jpg";
                    }
                }
            }
        })
    </script>

Vue 指令

v-show					# 本质是改变元素的 display样式
v-if					# 作用和 v-show一样, 但它的隐藏是直接将 dom元素 删除

根据表达式的真假，切换元素的显示和隐藏

    <div id="app" v-show="isShow">
        {{ message }}
    </div>

	<script>
	    var app = new Vue({
	        el:"#app",
	        data:{
	            message:"fsdflsk",
	            isShow:false
	        }
	    })
	</script>

v-for						# 根据数据生成列表结构

    <div id="app" v-show="!isShow">
        <ul>
            <li v-for="item in arr">
                黑马视频真是牛：{{ item }}
            </li>
        </ul>
    </div>

	<script>
	    var app = new Vue({
	        el:"#app",
	        data:{
	            message:"fsdflsk",
	            isShow:false,
	            arr:["北京","上海","广州","深圳"]
	        }
	    })
	</script>

<!-- 也可以这样使用 -->
            <li v-for="(item,index) in arr">
                黑马视频真是牛：{{ item }}
            </li>

v-model							# 获取和设置表单元素的值, 双向数据绑定