Vue基础知识学习（后端）

Vue学习（后端）

---

Vue安装

-引入文件安装，直接在官网下载vue.js引入项目中
-直接引用CDN
-NPM安装（构建大型应用使用，在这不用）
-命令行工具（构建大型单页应用，在这不用）

Vue基本代码结构

<div id="root">{{msg}}</div>
<script type="text/javascript">
   new Vue({
        el: '#root',
        data: {
            msg: "Vue大法好",
        },
        mounted: {}, //初始化页面，渲染html完成后调用的
        watch:{},   //侦听器
        methods: {},    //事件的方法
    })
</script>

指令1：v-text,v-html，显示文本内容

<div id="root">
    <h1 v-text="text"></h1>
    <h1 v-html="text2"></h1>
</div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {        //vue实例中的所有数据
            text: '这是h1内容',
            text2: '这是h1内容2',
        },
    });
</script>
区别：
v-html中的数据原样显示
v-html中的数据可能会被转义，比如<h2>这是h2的内容</h2>会被当成html代码

指令2：v-on，绑定事件指令

<div id="root">
    <div v-on:click=”show()”></div>
</div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {},
        methods: {                   //事件都写在这里边
             show: function(){
                  alert('Vue大法好');
             },
        },
    });
</script>
简写：
v-on指令可以简写为  @ ， 例如  v-on:click=”show”   简写为  @click=”show”

指令3：v-bind，属性绑定

<div id="root">
    <div v-bind:title="title">属性绑定</div>
</div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             title: '这是属性绑定的测试文本',
        },
        methods: {},
    });
</script>
简写：
v-bind:指令可以简写为  : ， 例如  v-bind:title=”title” 简写为：:title=”title”

指令4：v-model,双向数据绑定

<div id="root">
    <input v-model="content" style="width: 30%;"/>
    <div>{{content}}</div></div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             content: '这是双向数据绑定的测试文本',
        },
        methods: {},
    });
</script>

侦听器：监听某个数据发生变化

<div id="root">
    <input v-model="content" style="width: 30%;"/>
    <div>{{content}}</div></div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             content: '33332',
        },
        watch:{
            content: function(){ }    //侦听content的内容发生了变化，则执行该方法
        }
    });
</script>

初始化页面完成后渲染数据 mounted

<div id="root">
    <input v-model="content" style="width: 30%;"/>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             content: '原数据',
        },
        mounted () {
            this.content = '初始化页面数据';  //页面初始化完成后执行的操作，一般编辑时使用
        },
    });
</script>

指令5：v-show,v-if，显示与隐藏

<div id="root">
    <button @click="handleClick()">点击切换</button>
    <div v-if="show">{{content}}</div></div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             show: true,
             content: '这是div的内容',
        },
        methods: {
             handleClick: function(){
                  this.show = !this.show;
             },
        }
    });
</script>
区别：v-if隐藏时移除dom，v-show隐藏时hiden，频繁隐藏显示时v-show比较好

指令6：v-for，循环

<div id="root">
    <div>
            v-for指令：
            <ul v-for="item of list"> <!--或者 item in list-->
                <li>{{item}}</li>
            </ul>
        </div><script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
              list: [
                '联想', '百度', '腾讯', '阿里'
            ],
        },
    });
</script>