Vue学习Day1

最新推荐文章于 2024-07-20 18:05:54 发布

吾忘

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量69

点赞数

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

本文链接：https://blog.csdn.net/weixin_43433068/article/details/116529937

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue基础语法

文本

1、插值

常见的数据绑定格式使用{{…}}。

2、Html

在vue中我们使用v-html来输出html代码

<div id="example1" class="demo">
	<p>使用双大括号的文本插值: {{ rawHtml }}</p>
	<p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
<script>
const RenderHtmlApp = {
	data() {
		return {
			rawHtml: '<span style="color: red">这里会显示红色！</span>'
		}
	}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

3、属性

在vue改变html属性中的值应该使用v-bind指令，这里我选择了使用单选按钮点击之后改变背景颜色的例子来进行验证。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
</head>
<body>
<div id="ex1">
  <label for="r1">点击我修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': user1}">
    v-bind:class 改变颜色！
  </div>
</div>

<script>
const app = {
  data() {
    return {
      user1: false
    }
  }
}
 
Vue.createApp(ex1).mount('#ex1')
</script>
</body>
</html>

4、指令是什么？

指令就是在属性前面带v的特殊属性，使用指令可以更方便的让我们对页面和数据更加方便的去输出。

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

下面举其他几个常用的指令

v-text 元素的InnerText属性,必须是双标签
v-model 让表单元素实现双向绑定，常用于表单<input>、<textarea>
v-if 判断是否插入这个元素
v-on 用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件
v-else 前提条件不满足则插入v-else元素
v-show 隐藏元素如果确定要隐藏, 会给元素的style加上display:none

拓展知识

Vue中message.split().reverse().join()函数用法：
1、split(’’) 把一个字符串分割成字符串数组把数据拆分为一个数组,括号里的’ ‘是把数据拆分为每个字符串。
2、reverse()方法颠倒数组中元素的顺序只作用于数组，跟在split(’’)后才能起作用，在一个字符串后面不起作用，如message.reverse()。
3、join(’’) 方法把数组中的所有元素放入一个字符串所以，message.split(’’).reverse().join(’’) 意思是把字符串翻转重组成字符串hello→olleh

今天就写这么多吧，也是第一天开始写，明天继续写

吾忘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习Day1

Vue基础语法文本1、插值vue中常见的数据绑定格式使用{{…}}2、Html在vue中我们使用v-html来输出html代码<div id="example1" class="demo"> <p>使用双大括号的文本插值: {{ rawHtml }}</p> <p>使用 v-html 指令: <span v-html="rawHtml"></span></p></div><script&
复制链接

扫一扫