<———
在这之前,你肯定会注意到上面箭头所指的位置,那么你一定会看见,文章外面的大拇指图标,动动你的手指,就能点一下它,表示你很喜欢这篇文章。
正题:
如果你不愿意多花时间去自学vue.js 官网的API,那么你可以在跟着下面的例子学习最实用,最容易上手的案例。

正题:
如果你还不会使用最基本的vue.js的话,推荐你先去看一下我的“1.学习使用vue.js(适合初学者)”然后再来学习以下内容:

这篇文章主要讲vue的基本指令

首先你需要引入vue.js:

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

声明式渲染(其实就是在页面添加内容)
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:


第一种方法v-html绑定一条内容

<div id="app">
    <div v-html="msg"></div>
</div>

你可以在js里这么写:

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'<h1>HELLO VUE</h1>'
            }
        }
    })
</script>   

然后你的页面会出现一条一模一样的内容。

第二种方法v-text绑定一条内容

<div id="app">
    <div v-text="msg"></div>
</div>

你可以在js里这么写:

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'HELLO VUE'
            }
        }
    })
</script>   

第三种方法{{msg}}绑定一条内容

<div id="app">
    <h1>{{msg}}</h1>
</div>

你可以在js里这么写:

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'HELLO VUE'
            }
        }
    })
</script>   

这里需要说一下三种方法的区别
v-html: 可以绑定html标签,并且浏览器会识别你的标签
v-text 和 {{}} : 不可以识别标签,会把你写的“<></>”以文本的形式展示到浏览器上


除了文本插入,你还可以像这样来绑定元素特性:

v-bind 来绑定元素的属性

<div id="app">
    <input type="text" v-bind:value="msg"/>
</div>

js :

data(){
    return {
        msg:'HTLLO VUE'
    }
}

v-bind其实就是指令。你今后所有看到的 ”v-“就是绑定一条指令v-bind可以所写为一个冒号 ”:

<div id="app">
    <input type="text" :value="msg"/>
</div>

js :

data(){
    return {
        msg:'HTLLO VUE'
    }
}

当然,你并不是只能绑定表单输入框的value,你也可以绑定其他元素的tittle、src、href、alt等等…..

下面是VUE官网解释的v-bind:

这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
如果你再次打开浏览器的 JavaScript 控制台,输入 app2.message = '新消息',就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。

<div id='app'>
    <h1>{{msg}}</h1>
    <input type="text" v-model="msg"/>
</div>

js:

data(){
    return {
        msg : 'hello vue'
    }
}

你可以试着在表单输入框里面输入点东西,查看效果


文章持续跟新中。。。
请持续关注。。。。
如果你想学习的话,请在下方评论你的想法,
让我们共同进步~

上一篇:1.学习使用vue.js(适合初学者)
http://blog.csdn.net/heshuaicsdn/article/details/78949376

下一篇:学习使用vue.js(三)条件与循环 v-if、 v-for
http://blog.csdn.net/heshuaicsdn/article/details/79199252

Logo

前往低代码交流专区

更多推荐