vue基础

1、Vue

只关注视图层：HTML+CSS+JS

引入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

1.1 页面显示信息

<div id="app">
    {{message}}
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello"
        }
    });
</script>

1.2 指针悬停显示信息

<span v-bind:title="message">
    鼠标悬停试试
</span>

1.3 判断

<div id="app1">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>
<script>
    var vm1=new Vue({
        el:"#app1",
        data:{
            ok:false
        }
    });
</script>

1.4 循环

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

    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    </li>
</div>
<script>
    var vm2=new Vue({
        el:"#app2",
        data:{
            items:[
                {message: 'java'},
                {message: 'python'}
            ]
        }
    });
</script>

1.5 绑定事件

<div id="app3">
    <button v-on:click="sayHi">click me</button>
</div>
<script>   
	var vm2=new Vue({
        el:"#app3",
        data:{
            message:"java"
        },
        methods:{
            sayHi:function (event) {
                alert(this.message);
            }
        }
    });
</script>    

1.6 vue7大属性

• el
• data
• template
• methods
• render
• computed
• watch

1.7 双向绑定

<div id="app4">
    输入的文本：<input type="text" v-model="message"> {{message}}<br>
    性别：
    <input type="radio" name="sex" value="男" v-model="yhk"> 男
    <input type="radio" name="sex" value="女" v-model="yhk"> 女
    <p>
        选中了谁：{{yhk}}
    </p><br>

    下拉框：
    <select v-model="selected">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value:{{selected}}</span>
</div>

<script>
    var vm4=new Vue({
        el:"#app4",
        data:{
            message:"123",
            yhk:'',
            selected:''
        },
    });
</script>

1.8 组件

<div id="app5">
    <yan v-for="item in items" v-bind:aaa="item"></yan>
</div>

<script>
    //定义vue组件
    Vue.component("yan",{
        props:['aaa'],
        template:'<li>{{aaa}}</li>'
    });
    var vm5= new Vue({
        el:"#app5",
        data:{
            items:["java","linux","python"]
        }
    })
</script>

1.9 网络通信

Axios：是一个可以用于

导包

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

计算属性：计算出来的结果，保存在内存中s