学习Vue竟如此简单

最新推荐文章于 2023-06-26 20:14:21 发布

整日发愁

最新推荐文章于 2023-06-26 20:14:21 发布

阅读量819

点赞数 1

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_57180500/article/details/123119380

版权

Vue 作为前端三大框架之一，是一套用于构建用户界面的渐进式框架。简单，高效，生态丰富（插件多）。Vue在2022年发布Vue3.x想必很多想学前端的人都觉得Vue很难，其实不然，不信你往下看。

Vue的安装与使用

安装：

1.我们使用Vue可以直接引用script引入网络地址也可以下载下来引入

2.安装脚手架

npm install -g @vue/cli

创建实例：

createApp 函数创建一个新的应用实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个vue案例</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
	    <div id="app">
   		hello Vue!
	    </div>
	    <script>
		const app = Vue.createApp({
  			data() {
    				return { count: 4 }
 			 }
		})
		const vm = app.mount('#app')
		console.log(vm.count) // => 4
	    </script>
	</body>
</html>

Vue模板语法-文本渲染

指令是带有 v- 前缀的特殊 attribute。指令的属性值预期是单个 JavaScript 表达式

{{ }} 语法

{{ }} 中的表达式 对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持

每个绑定都只能包含单个表达式，所以下面的例子都不会生效

{{ if (ok) { return message } }}

实例演示：

代码：

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {msg:"学习Vue真好玩！"};
            }
        }).mount("#app")
    </script>
</body>

结果：

v-text指令

v-text指令是带有 v- 前缀的特殊属性

实例演示：

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

        Vue.createApp({
            data(){
                return {msg:"这也太easy了吧"};
            }
        }).mount("#app")
    </script>
</body>

结果：

v-html指令

为了输出真正的 HTML，你需要使用v-html

实例演示：

代码：

<body>
    <div id="app">
        <!-- 不会标识标签 -->
        <p v-text="msg"></p>
        <!-- 可以识别标签 -->
        <p v-html="msg"></p>
    </div>
    <script>

        Vue.createApp({
            data(){
                return {msg:"<strong>还可以接受</strong>"};
            }
        }).mount("#app")
    </script>

结果：

属性渲染

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：<div v-bind:title="title"> Vue就是简单</div>

我们可以使用v-bind指令给html标签动态的绑定属性。
<button v-bind:disabled="canUse">按钮</button>

v-bind可以简写为：
<button :disabled="canUse">按钮</button>

演示实例：

代码：

<body>
    <div id="app">
        <p v-bind:title="msg">鼠标停留显示</p>
        <p :title="msg">学习Vue</p>
        <button :disabled="canUse">按钮</button>

    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    msg:"学习使我开心",
                    canUse:true,
                }
            }
        }).mount("#app")
    </script>
</body>

结果：

条件渲染

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。
可以与v-else一起使用

演示实例：

<body>
    <div id="app">
        <!-- v-if v-else 成对出现 只出现一条语句另一条不出现 -->
        <p v-if="isLog">欢迎回来，我的朋友</p>
        <p v-else>请登录后操作</p>
        <button>登录</button>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    isLog:false
                }
            }
        }).mount("#app")
    </script>
</body>

结果：

还有与v-if一起使用的其他指令如：v-else-if多重条件渲染

演示实例：

<body>
    <div id="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=70">中等</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>不及格</p>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    score:78
                }
            }
        }).mount("#app")
    </script>
</body>

输出结果：中等

另一个用于根据条件展示元素的选项是 v-show 指令

<body>
    <div id="app">
        <p v-if="can">我会显示</p>
        <p v-show="can">我也会显示show</p>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    can:true
                }
            }
        }).mount("#app")
    </script>
</body>

结果：

v-show与v-if区别：

v-show CSS方法隐藏
v-if 移除dom节点方式隐藏
频繁切换用v-show 反之用v-if

整日发愁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习Vue竟如此简单

目录Vue的安装与使用安装：创建实例：Vue模板语法-文本渲染{{ }} 语法实例演示：v-text指令实例演示：v-html指令实例演示：属性渲染演示实例：条件渲染演示实例：Vue 作为前端三大框架之一，是一套用于构建用户界面的渐进式框架。简单，高效，生态丰富（插件多）。Vue在2022年发布Vue3.x想必很多想学前端的人都觉得Vue很难，其实不然，不信你往下看。Vue的安装与使用安装：1.我们使用Vue可以直接引...
复制链接

扫一扫