zoukankan      html  css  js  c++  java
  • 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=" 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=" 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=" 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>
    
  • 相关阅读:
    C++如何对接sqlitepp
    c++11中的condition_variable和之前的pthread_cond_timedwait的不同之处
    浏览器设置代理模式后的报文是怎么样的?
    C++11中令人吐血的"移动语义"和"新的右值引用"
    MYSQL的事务及锁操作
    Microsoft Word —— 使用宏脚本将所有表格添加边框
    Navicat——如何导出数据字典
    Redis——配置详解
    keepalived——tengine集群主备均有VIP
    Docker——如何修改运行中容器的映射端口
  • 原文地址:https://www.cnblogs.com/alisleepy/p/11200355.html
Copyright © 2011-2022 走看看