Vuejs 基础

ChaunceyQu

于 2017-12-07 00:36:21 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-js 文章标签： vue vue-js

本文链接：https://blog.youkuaiyun.com/Summit_XY/article/details/78736679

vue-js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Vue.js中各种指令的使用方法，包括条件渲染、事件绑定、数据绑定等核心功能，并展示了如何通过简单的语法糖来提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//html
<div id="app">
    <p>{{msg1}}</p>

    <p v-text="msg"></p>

    <p v-once>{{msg2}}</p><!--一次性插值，将无法改变-->

    <p v-html='msg3'><p><!--msg3将解析成html输出-->

    <p>{{'ok'?'yes':'no'}}</p><!--输出yes-->

    <p>{{num+1}}</p><!--如果num为3，则输出4-->

    <p v-bind:id="'msg'+4"></p><!--如果msg值为msg，则id为msg4-->
    <p><a :href="url">链接</a></p><!--可以通过修改app.url的值，：为v-bind:的省略写法-->

    <button @click="click">click</button><!--@为v-on:的缩写，绑定点击事件click，'click'可以在data里定义为函数-->

    <p v-if='seen'>你能看见我</p><!--如果seen值为true，则标签显示，反之标签不显示-->
</div>

//js
var app=new Vue({
    el:'#app',
    data:{
        message:'hello world'
    }
})
//html 与 js message 互相绑定