Vue 基础语法

最新推荐文章于 2020-09-29 08:29:51 发布

来斤华子

最新推荐文章于 2020-09-29 08:29:51 发布

阅读量272

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/hualaoshuan/article/details/107154454

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本篇概要：

1. 模板语法、v 指令；
2. v-if 判断；

1. 模板语法、v 指令；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法、v指令入门</title>
    <!-- 最传统古老的开发方式，创建一个 html
        有些开发方式使用这种方式是不能写的
        在做一些测试的时候可以使用 -->
    <!-- Vue 的核心库，运行时自动把相关内容渲染到页面上-->
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="root">
    <!-- 模板语法：https://cn.vuejs.org/v2/guide/syntax.html -->
    <div>
        {{ myname }}  - {{ my.info }}
    </div>
    <div>
        <!-- JS 表达式支持 -->
        <!-- 参考：https://cn.vuejs.org/v2/guide/syntax.html#%E4%BD%BF%E7%94%A8-JavaScript-%E8%A1%A8%E8%BE%BE%E5%BC%8F -->
        {{ myage + 1 }}
    </div>
    <div>
        <!-- test2() 里的 <b> 标签在这里是无效的 -->
        {{ test() }} - {{ test2(myage) }}
    </div>

    <!-- v 指令：https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4 -->
    <!-- 一旦写了 v 指令， html 内部的代码就无效了 -->
    <div v-html="test2(my.age)">
    </div>

</div>
<script>
    // 对象，里面有两个最基本属性，是固定属性
    // 代码要写在 id 为 root 的 div 下面
    const config = {
        // el：挂载标记 / 属性
        el: '#root',
        // data：实际的数据
        data: {
            myname: "Tom",  // 属性名：值
            myage: 18,
            my: {
                age: 30,
                info: "Tom is a student"
            },
            test: function () {
                return 'this is a function'
            },
            // 箭头函数，同时传参
            test2: (age)=> 'My age is <b>' + age.toString() + '</b>'
        }
    };

    // 创建一个 Vue 实例，传入的参数是一个对象
    new Vue(config);

</script>
</body>
</html>

2. v-if 判断；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-if判断</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<!-- 起到了对模板显示或者不显示的基本作用 -->
</head>
<body>
<div id="root">
	<!-- v-if 后面加判断条件、正确的表达式 -->
<!--	<div v-if="1==1">-->
<!--	<div v-if="test()">-->
<!--	<div v-if="()=>true">-->
	<div v-if="test(age)">
		true 显示的文字
	</div>
	<div v-else-if="age == 19">
		正好 19 岁
	</div>
	<div v-else>
		false 显示的文字
	</div>

</div>
<script>
	const config = {
		el: '#root',
		data: {
			age: 19,
			test:(age) => age > 19 ? true : false,
		},

	};

	new Vue(config);
</script>

</body>
</html>

来斤华子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 基础语法

本篇概要：1. 模板语法、v 指令；2. v-if 判断；1. 模板语法、v 指令；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模板语法、v指令入门</title> <!-- 最传统古老的开发方式，创建一个 html 有些开发方式使用这种方式是不能写的在做一些测试的时候可以使
复制链接

扫一扫