Vue基础

• Vue主要包含两个部分：Vue对象和指令
• 导入标签
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1. Vue对象

            var 对象名 = new Vue({
                el:关联对象的选择器,
                data: 数据对象(属性和值自己决定),
                methods:方法对象(属性对应的值是方法)
            })

2. 设置标签内容

• {{Vue属性名}}

        <div id="app-2">
            <p>{{pText}}</p>
            <a href="">{{aTitle}}</a>
            <h1>{{title}}</h1>
        </div>
        
        <script type="text/javascript">
            var app2 = new Vue({
                el:'#app-2',
                data:{
                    pText: '我是段落',
                    aTitle: '百度一下',
                    title: '我是标题1'
                }
            })
        </script>

3. 设置标签属性值

• v-bind:属性='Vue属性名'

        <div id="app-3">
            <img v-bind:src="imageUrl" v-bind:title="name"/>
        </div>
        
        <script type="text/javascript">
            var app3 = new Vue({
                el:'#app-3',
                data:{
                    imageUrl:'img/a1.jpg',
                    name: '路飞'
                }
            })
            
        </script>

4. if语句

• v-if='条件语句（Vue属性名）'：如果条件语句的结果是true，标签就显示，否则不显示（条件语句需要是与Vue属性相关联的语句）

        <div id="app-4">
            <!--如果message的值是空就隐藏，否则显示-->
            <p v-if="message">内容是:{{message}}</p>
            
            <!--如果message的值是123就显示，否则隐藏-->
            <p v-if="message=='123'">内容是:{{message}}</p>
        </div>
        <script type="text/javascript">
            var app4 = new Vue({
                el:'#app-4',
                data:{
                    message: 'Vue.js'
                }
            })
        </script>

5. 循环结构

• v-for="变量 in 数组属性"

        <div id="app-5">
            <ul>
                <li v-for="mesage in names"><img v-bind:src="mesage['img']"/>{{mesage.name}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            var app5 = new Vue({
                el:'#app-5',
                data:{
                    names:[
                        {img:'img/a1.jpg', name:'python'},
                        {img:'img/a2.jpg', name:'前端H5'},
                        {img:'img/a3.jpg', name:'java大数据'},
                        {img:'img/luffy.jpg', name:'物联网'}
                    ]
                }
            })
        </script>

6. 事件绑定

• v-on:事件名='函数名'

        <div id="app-6">
            <p>{{num}}</p>
            <button v-on:click="addAction">加1</button>
        </div>
        <script type="text/javascript">
            var app6 = new Vue({
                el:'#app-6',
                data:{
                    num: 0
                },
                methods:{
                    addAction: function(){
                        this.num ++
                    }
                }
                
            })
        </script>

7. input标签内容和属性双向绑定

• v-model="Vue对象属性名"

        <div id="app-7">
            <p>{{message}}</p>
            <input v-model="message" />
        </div>
        <script type="text/javascript">
            var app7 = new Vue({
                el: '#app-7',
                data:{
                    message: '你好'
                }
            })
        </script>

8. stop修饰符

• v-on：事件名.stop：捕获指定标签上的指定事件（阻止事件传递给父标签）

        <div id="div1" v-on:click.stop="action1">
            <div id="div2" v-on:click.stop="action2">
                <div id="div3" v-on:click.stop="action3">
                    
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            
            var app1 = new Vue({
                el:'#div1',
                methods:{
                    action1:function(){
                        alert('div1被点击')
                    },
                    action2:function(){
                        alert('div2被点击')
                    },
                    action3:function(){
                        alert('div3被点击')
                    }
                }
            })
            
        </script>

9. 表单提交阻止页面重载

• 在form标签中设置：v-on:submit.prevent='方法属性名'

        <form action="" method="get" id="app-2" v-on:submit.prevent="submitAction">
            <input type="" name="username" id="" value="" />
            <input type="password" name="password" id="" value="" />
            <input type="radio" name="sex" id="" value="" />男
            <input type="radio" name="sex" id="" value="" />女
            <input type="submit" value="提交"/>
        </form>
        <script type="text/javascript">
            var app2 = new Vue({
                el:'#app-2',
                methods:{
                    submitAction:function(){
                        alert('已经提交')
                    }
                }
            })
        </script>

10. Vue加载异步数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app-1">
            <h1>{{name}}</h1>
            <p v-for="data in datalist" v-if="datalist">{{data.title}}</p>
            
        </div>
        
        
        <!--1.将请求到的数据通过Vue加载到网页中
            1)
        -->
        <script type="text/javascript">
            //0)创建Vue对象
            var app1 = new Vue({
                el:'#app-1',
                data: {
                    datalist: [],
                    name: 'abc'
                }
            })
            
            
            //1)通过接口请求
            $.ajax({
                type:"get",
                url:"http://rap2api.taobao.org/app/mock/177073/houseList",
                async:true,
                success:function(result){
                    //2）数据请求成功将请求到的数据关联到Vue对象
                    console.log(result)
                    app1.datalist = result.datalist
                
                }
            });
        </script>
        
    </body>
</html>