vue.js :{{模板}}|v-text文本|v-html标签|v-show显示|v-if渲染|v-on事件|v-on修饰|v-for循环|v-bind属性|v-model绑定|AJAX调用

10 篇文章 0 订阅

本文旨在抛砖引玉,让新人快速上手,Vue.js更多强大的功能还需慢慢发掘...

引用vue.js文件(以下二选一)

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

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

②将data里的数据利用模板{{ 参数名称 }}输出v-text输出字符串,v-html输出DOM标签及内容和效果

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="app">
        <span>{{ msg + ' !!!' }}</span><br />
        <span>{{ num + 1 }}</span><br />
        <span v-text='txt'></span><br />
        <span v-html='htm'></span><br />
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello word",
                num:1,
                txt:"<b>ABCDEFG</b>",
                htm:"<b>ABCDEFG</b>"
            },
        });
    </script>

本例参数名称为:msg,其值为:hello word,模板为:{{  msg + ' !!!' }},输出:hello word !!!

本例参数名称为:num,其值为:1,模板为:{{  num + 1 }} ,输出:2

说明:{{模板}} 不仅仅支持字符串的拼接,还支持数字的计算 等


v-text 会替换标签<?></?>内所有文本,而且是纯文本,哪怕是包含了html标签的字符串,也会输出html的标签

v-html会替换标签<?></?>内所有文本,如果文本包含了html标签,则这些标签会被渲染成html的DOM元素

如本例中,参数txt和htm的内容都是:"<b>ABCDEFG</b>",

v-text则会显示出<b>和</b>这字符串,而且没有加粗字体的效果,输出:<b>ABCDEFG</b>

v-html就不会显示<b>和</b>这些标签,并且将b标签内的字符串“ABCD”加粗显示,输出:ABCDEFG


{模板 }}v-textv-html 之间的区别:

{模板 }} 只会将标签内变量所在的位置,进行内容的拼接或计算,变量以外其他的内容不会改变

v-textv-html  会将标签内所有的内容都替换成变量的值,原标签内的所有内容都会被改变


显示和隐藏 v-show 属性,若 v-show的值为false,则当前div的 style="display:none";v-if的值为false,则v-if所在的html代码不存在

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="app">
        <span v-show="show">{{ msg + ' !!!' }}</span>
        <span v-if="num > 5">{{ msg + ' ???' }}</span>    
    </div>
    <script>
       var vv = new Vue({
            el: "#app",
            data: {
                msg: "hello word",
                show: false,
                num: 5
            },
        });
    </script>

 

v-if  和 v-show 的区别:

v-show 只是控制html标签的style的display值,html的标签还是妥妥的存在的。

v-if 如果等于false的话,连html标签这个DOM对象都没有(也就是少了几行html代码)。

如果页面要频繁切换一个DOM对象的显示、隐藏,推荐用 v-show


在 v-show 和 v-if 后的 =" " 内,除了直接赋bool型的值之外,还可以添加判断条件,如:v-if="num > 5" 来控制是否显示


绑定事件用:v-on:+事件名称 或者 @+事件名称="函数名称",如@click="函数",调用事件的函数方法在methods中实现

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="app">
        <button v-on:click="myShow">显示|隐藏</button>
        <span v-show="show">{{ msg + ' !!!' }}</span>
        <span v-if="show">{{ msg + ' ???' }}</span>
    </div>
    <script>
       var vv = new Vue({
            el: "#app",
            data: {
                msg: "hello word",
                show:true
            },
            methods: {
                myShow: function () {
                    this.show = !this.show;
                }
            }
        });
    </script>

v-on:click="myShow" 可以简写为 @click="myShow" 效果一样的

实例内部引用本实例中的参数用,取值:var str = this.参数名; 赋值:this.参数名 = 新值;

实例外部调用实例中参数用:实例对象.参数名,如,取值:var str =vv.show; 赋值: vv.show = false;


⑤用v-for循环加载数组或List对象。v-for所在的html标签块就是循环模板,例1:

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="app">
        <ul>
            <li v-for="(item, key, index) in items">{{key}}:{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                items: {
                    name: "Jerry",
                    age: 18,
                    heigth: 173,
                    weight: 68
                }
            }
        })
    </script>

 

例2:

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="app">
        <table border="1">
            <tr>
                <th>ID</th>
                <th>name</th>
                <th>age</th>
                <th>heigth</th>
                <th>weight</th>
            </tr>
            <tr v-for="(item,index) in items">
                <td>{{index + 1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.heigth}}cm</td>
                <td>{{item.weight}}kg</td>
            </tr>
        </table>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                items:
                    [
                        {
                            name: "Jerry",
                            age: 18,
                            heigth: 173,
                            weight: 68
                        },
                         {
                             name: "Marry",
                             age: 16,
                             heigth: 168,
                             weight: 48
                         },
                          {
                              name: "Carry",
                              age: 22,
                              heigth: 170,
                              weight: 52
                          },
                              {
                                  name: "Hurry",
                                  age: 25,
                                  heigth: 177,
                                  weight: 79
                              },
                    ]


            }
        })
    </script>

 

v-for,一个参数写法: v-for="item in items"  其中:item是items中的一个值,或者一个对象

v-for,两个参数写法:v-for="(item, index) in items"  其中:index是对象item的下标(从0开始)

v-for,三个参数写法:v-for="(item, key, index) in items"  其中:key是对象item的属性名称(不适用于纯粹的数组)

两个和三个的参数的顺序不能颠倒,切记!! 不能写成:v-for="(item, index, key) in items" 这样(不报错,但含义错误)


纯粹的数组,如字符串数组{"aa","bb","cc"},则 item 直接就是"aa"或"bb"或"cc" 的具体值

实体类数组,则item是数组中的一个对象,取值方法:item.属性名,如:item.name、item.age 等等


v-model双向绑定表单控件的值; v-on:事件修饰 ,v-on:事件名称.修饰符,如: v-on:keyup.enter,只有enter键才响应keyup事件

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="app">
        <input type="text" v-model="txt" @keyup.enter="showTxt" />
    </div>
    <script>
        var vv = new Vue({
            el: "#app",
            data: {
                txt: ""
            },
            methods: {
                showTxt:function(){
                    alert(this.txt);
                }
            }
        });
    </script>

 本例,html表单text,利用 v-model绑定了data中的一个变量txt,text所输入的值会改变其所绑定的变量txt的值,获取txt的值就是表单text的值。

双向绑定:表单text的值发生改变,则data的参数txt的值也会发生改变。改变data的txt的值,则页面的text控件内的值也发生改变。


v-on:事件修饰 ,如本例: @keyup.enter,在表单text中输入文字后按下回车键响应keyup事件,调用showTxt函数。


v-bind 绑定html标签属性 ,如 img 的 src属性 可以用 v-bind:str="参数名",则将参数对应的值赋给了img的str

    <style>
        .cssImg {
            width: 100px;
            height: 100px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <img v-bind:src="imgUrl" v-bind:title="imgAlt" v-bind:class="imgClass" />
    </div>
    <script>
        var vv = new Vue({
            el: "#app",
            data: {
                imgUrl: "img/1.jpg",
                imgAlt: "头像1",
                imgClass: "cssImg"
            }
        });
    </script>

v-bind:src="imgUrl" v-bind:title="imgAlt" v-bind:class="imgClass" 可以简写为:

           :src="imgUrl"          :title="imgAlt"            :class="imgClass"


Vue.js + jQueryAJAX 调用后台数据:

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <div id="app">
        <input type="text" width="150px" v-model="txtName" @input="input" v-bind:placeholder="tips">
        <div class="div1" v-show="showDiv">
            <ul>
                <li v-for="item in listName" @click="selectName(item)">{{item}}</li>
            </ul>
        </div>
    </div>
    <script>
        var myVue = new Vue({
            el: "#app",
            data: {
                showDiv: false,
                txtName: "",
                listName: [],
                tips: "请输入:张"
            },
            methods: {
                input: function () {
                    myVue.listName.splice(0, myVue.listName.length);
                    if (myVue.txtName.replace(" ", "") == "") {
                        myVue.showDiv = false;
                        return;
                    }
                    $.ajax({
                        type: "get",
                        url: "names.html",
                        success: function (res) {
                            var arr = res.split(",");
                            for (i in arr) {
                                if (arr[i].indexOf(myVue.txtName) >= 0) {
                                    myVue.listName.push(arr[i]);
                                    myVue.showDiv = true;
                                }
                            }
                        }
                    });
                },
                selectName: function (selName) {
                    this.txtName = selName;
                    this.showDiv = false;
                }
            }
        });
    </script>

本例 $.ajax({...}); 就是jQuery的AJAX,它将后台获取到的值,传递给myVue对象的listName参数变量中去;

在vue实例外部调用vue实例中参的数用:实例对象.参数名,如:myVue.listName 、 myVue.showDiv 这样;

相关资料: 

Vue.js + jQuery Ajax 进行INSERT和SELECT操作 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值