Vue入门

环境搭建：

文档：https://www.jquery123.com/

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

直接上代码感受一下（注意methods）

<div id="app">
    <button v-on:click="say">click me</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "Hello World"
        },
        methods: {
            say: function (event) {
                alert(this.message);
            }
        }
    });
</script>

理解双向绑定（单选框）

<div id="app">
    <input type="radio" name="sex" value="男" v-model="salaer" />男
    <input type="radio" name="sex" value="女" v-model="salaer" /> 女
    <p>
        选中了那个：{{salaer}}
    </p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            salaer:''
        }
    });
</script>

文本

<div id="app">
    <textarea v-model="message"></textarea>
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "Hello World"
        }
    });
</script>

熟悉组件

<div id="app">
    <xian></xian>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    Vue.component("xian",{
        template:'<li>Hello!</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
        }
    });
</script>

绑定循环

Vue.component（参数名字）注册一个组件

props 通过绑定对应的变量值，（接收的参数）需要参数传输到组件就需要props

template 模板

<div id="app">
    <xian v-for="item in items" v-bind:za="item"></xian>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    Vue.component("xian",{
        props:['za'],
        template:'<li>{{za}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            items:["java","linux","web","html"]
        }
    });
</script>

了解一下七大属性

el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

template属性
用来设置模板，会替换页面元素，包括占位符。

methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中

render属性
创建真正的Virtual Dom

computed属性
用来计算

watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

Axios异步通信（简单体验）

注意：request.data属性没有括号

<div id="app">
<div>{{info.msg}}</div>
<div>{{info.url}}

    <a v-bind:href="info.url">click me</a>

</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data(){
          return{
              info:{
                url:null,
                msg:null
              }
          }
        },
        mounted(){
            axios.get('test.json').then(response=>(this.info=response.data));
        }
    });
</script>

解决Vue加载过程中闪烁（处理为白屏，总比闪烁好）

<style>
    [v-clock]{
        display: none;
    }
</style>