文享日志

Vue基本指令

Vue.js JavaScript

发表于2018年05月25日13:29:29

更新于2018年05月27日10:34:00

0条评论 181次阅读

Vue是一个数据驱动 的渐进式框架

在下面的学习中,理解这句话特别特别重要。

数据驱动的最基本原理在于Object.defineProperty方法。该方法定义的属性,可以用方法参数中的get,set来实现数据的劫持。


先上一个最简单的一个Demo


<p>{{name}}p>


new Vue({
    el:"#app",
    data:{
        name:"Vue,你好"
    }
})


v-model指令

作用:数据双向绑定


<p>测试v_model:{{v_model}}p>

<input type="text" v-model="v_model">


new Vue({
    el:"#app",
    data:{
        v_model:"Vue,你好"
    }
})


v-once指令

作用:绑定{{}}中的数据,不随v-model指令改变数据而改变

<p v-once>测试v-once:原始值:{{v_once}}p>

<p>测试v-once:更新值:{{v_once}}p>

<input type="text" v-model="v_once">


new Vue({
    el:"#app",
    data:{
        v_once:"v-once中的值不随v-model改变的值而改变"
    }
})


v-if , v-if-else-if , v-else指令

作用:条件分支,判断哪些标签元素需要显示,哪些不显示


<p v-if="score >= 90">优秀p>

<p v-else-if="score >= 75">良好p>

<p v-else-if="score >= 60">及格p>

<p v-else>不及格p>

测试判断指令:<input type="text" v-model='score'>


<p>注意:v-else指令不能单独使用,必须跟在v-if指令之后或者v-else-if之后p>


new Vue({
    el:"#app",
    data:{
        v_once:"v-once中的值不随v-model改变的值而改变"
    }
})


v-for指令

作用:创建多个内容不同的相同标签

<ul>

<li v-for="(score , index ) in scores ">{{score}}li>

ul>


<p>v-for = "形参 in 数组/对象/字符串/数字"p>

<p>v-for = "(形参 , 索引) in 数组/对象/字符串/数字"p>


new Vue({
    el:"#app",
    data:{
        scores: [1, 2, 3, 4],
    }
})


v-text指令

作用:实现标签内文本的替换

<p v-text="v_text">今天天气好p>


new Vue({
    el:"#app",
    data:{
        v_text: "标签中有v-text指令,v-text指定字符串覆盖标签中的文本。"
    }
})


v-html指令

作用:实现标签内的html标签的替换

<div v-html="v_html">

    一层

        <p>二层p>

div>


new Vue({
    el:"#app",
    data:{
        v_html: "将标签内的所有东西替换成v-html中指定的html片段插入script代码,代码不执行"
    }
})


v-bind指令

作用:实现标签内属性的动态指定

<img src="v_bind_src" alt="src使用vue中的data,图片请求失败">

<img v-bind:src="v_bind_src" v-bind:alt="v_bind_alt" :style="{ width: srcWidth,height: srcHeight}">


<p>v-bind作用:动态为标签绑定属性p>

<p>v-bind命令使用: v-bind:参数=表达式p>


new Vue({
    el:"#app",
    data:{
        v_bind_src: "https://cn.vuejs.org/images/logo.png",
        v_bind_alt: "使用v-bind图片请求"
    }
})


v-on指令

作用:监听处理一些简单事件

<p>{{v_model}}p>

<button v-on:click="v_model = '辣辣'">v-on指令button>

<button @click="test">使用methodbutton>


new Vue({
    el:"#app",
    data:{
        v_model: '哈哈'
    }
})



根据上面学习的指令,可以简单的做个实践:

999884352710119424.jpg

要求:输入用户信息,点击“创建新用户”后,在底下面板中可以显示。点击“删除”,删除用户信息。



👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广