码迷,mamicode.com
首页 > 其他好文 > 详细

Vue学习

时间:2021-04-20 14:38:41      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:lang   var   元素   挂载   htm   一个   基本语法   第一个   baidu   

Vue.js基本语法

第一个Vue程序

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: ‘#app‘,          //绑定挂载点
  data: {
    message: ‘Hello Vue!‘
  }
})

el绑定的作用实例范围是什么

el绑定的标签内部都可以

el只能绑定单标签

DATA数据对象

此处省略十万字

本地应用

v-text指令

作用:

  1. 设置标签文本值
  2. 默认写法会替换全部内容,使用插值表达式{{ }} 会替换指定内容
<div>
	<h2 v-text="message"></h2>
    <h2>
        文本{{message}}    //插值表达式
    </h2>
</div>
var app = new Vue({
    el:"#app",
    data:{
        message:"信息",
    }
})

插值表达式

<body>
    <div id="app">
        <h2 v-text="msg+‘!‘"></h2>    //可以直接在指令中直接加入表达式
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"msg"
            }
        })
    </script>
</body>

v-html指令

作用:

  1. 设置标签innerHTML
  2. 将data内容解析成为标签内容
  3. v-text无论内容是什么都只会被解析成文本
<div id="app">
    <div v-html="content"></div>  
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            content:"<a href="http://www.baidu.com">百度</a>"
        }
    })
</script>

此时:content值将被解析成为a标签

v-on指令

作用:

  1. 为元素绑定事件

Vue学习

标签:lang   var   元素   挂载   htm   一个   基本语法   第一个   baidu   

原文地址:https://www.cnblogs.com/sushiyv/p/14672913.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!