Vue-起步、模板语法、条件语句

最新推荐文章于 2024-08-10 18:26:28 发布
最新推荐文章于 2024-08-10 18:26:28 发布
阅读量90 收藏
点赞数
文章标签： vue.js javascript html5
原文链接：https://blog.csdn.net/nanchen_J/article/details/120398356
版权

通过以下代码获取Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue是一种声明式的变成，而原生js是命令式编程 

命令式编程（原生JS）：
创建div元素，设置id属性
定义一个变量叫message
将message变量放在div元素中显示
修改message数据
将修改的元素替换到div
声明式编程（Vue）：
创建一个div元素，设置id属性
定义一个vue对象，将div挂载在vue对象上
在vue对象内定义变量message，并绑定数据
将message变量放在div元素上显示
修改vue对象中的变量message，div元素数据自动改变
下面是基础用法：

Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。

data 用于定义属性，本实例中写了一个属性为message。

methods 用于定义的函数，可以通过 return 来返回函数值

{{ }} 用于输出对象属性和函数返回值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建一个动态的div</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 首先创建一个div盒子他的ID为box -->
    <div id="box">
        {{message}}              <!-- {{ }} 用于输出对象属性和函数返回值。 -->
    </div>
<button @click="fn1()">点击按钮</button>  <!-- 点击事件的写法 -->
    <script>
        var box = new Vue({       
            el:'#box',      <!-- 有一个el 参数，它是 DOM 元素中的 id,也就是上方div中的box -->
            data:{            <!-- data：定义属性 -->
                message:'你好'<!-- 如果要是多个属性就用,隔开 -->
            },
            methods:{      <!-- methods 用于定义的函数，可以通过 return 来返回函数值-->
                 fn1:function(){
                    console.log('你点击了此按钮');
                }
            }
        })
    </script>
</body>
</html>

效果如下：

 可以通过F12调用到控制台，去更改Vue对象的message的值

Vue模板语法：
指令
指令是带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。

v-html ：有时候我们不希望直接输出<h1>欢迎学习Vue</h1>这样的字符串，而输出被html自己转换的h1的文字，此时可以使用v-html

   <div id="box">
        <div v-html='message'></div>
    </div>
    <script>
        var box = new Vue({
            el:'#box',
            data:{
                message:'<h1>欢迎学习Vue</h1>',
            },
        })
    </script>
效果如下： 

 v-on ：监听DOM   v-on:click 也可以写成 @click 后者是其语法糖

举个例子：

  <!-- 首先创建一个div盒子他的ID为box -->
    <div id="box">
        <!-- <button v-on:click='add()'>+</button> -->
        <button @click='add()'>+</button>         <!-- 这两种方法都可以 -->
        <h2>{{count}}</h2>
    </div>
    <script>
        var box = new Vue({
            el:'#box',
            data:{
                message:'欢迎学习Vue',
                count:0,
            },
            methods:{
                add:function(){
                    this.count++
                }
               <!-- 两种写法都可
                add(){
                    this.count++
               }
                 -->
            }
        })
    </script>
效果如下：

v-once：表示该dom元素只渲染一次，之后数据改变，不会再次渲染

举个例子：

 <div id="box">
       <h2>{{message}}</h2>
        <div v-once>{{message}}</div>
        <div v-once>{{message}}</div>
    </div>
    <script>
        var box = new Vue({
            el:'#box',
            data:{
                message:'欢迎学习Vue',
            },
        })
    </script>


 v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

    <div id="box">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                message: '欢迎学习Vue',
            },
        })
    </script>


v-bind ：指令被用来响应地更新 HTML 属性 

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-bind:title 我们也可以写成:title 后者是其语法糖，其作用当鼠标悬停在某段文字上时会出现提示
 感兴趣的可以自己去尝试一下。 

v-if：彻底消失

v-show此消失是等于display：none；经常做开销比较大的显示和消失，建议用v-show

 <div id="box">
        <h2 v-if="seen">seen</h2>
        <h2 v-show="show">show</h2>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                seen:true,
                show:false,
            },
        })
    </script>
v-pre：有时候我们期望直接输出{{message}}这样的字符串，而不是被{{}}语法转换的message的变量值，此时我们可以用v-pre标签

    <div id="box">
        <h1 v-pre>{{message}}</h1>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                message:'你好'
            },
        })
    </script>
效果如下：

 v-text：覆盖dom元素中的数据，相当于js的innerHTML方法 

    <div id="box">
        <h1 v-text='p'>{{message}}</h1>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                message:'你好',
                p:'我很好'
            },
        })
    </script>


 Vue.js条件语句：v-if、v-else-if、v-else直接看例子：
    <div id="box">
        <h2 v-if="age<60">不及格</h2>
        <h2 v-else-if="age<95">良好</h2>
        <h2 v-else>优秀</h2>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                age:88
            },
        })
    </script>


v-for ：可以绑定数据到数组来渲染一个列表
切换栏效果：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历列表</title>
    <script src="js/vue.js"></script>
    <style>
        ul li{
            cursor: pointer;
        }
        .active {
            color: #f00;
           
        }
    </style>
</head>
 
<body>
    <!-- 首先创建一个div盒子他的ID为box -->
    <div id="box">
        <ul>
            <!-- <li v-for='(item,index) in movies' :key='index' :class="{active:currentIndex === index}"
                @click="change(index)">{{item}}-------{{index}}</li> -->
            <!-- <li v-for='(item,index) in movies' :key='index' :class="currentIndex === index?'active':''"
                @click="change(index)">{{item}}-------{{index}}</li> -->
                <li v-for="(item,index) in movies" :key="index" :class="getStyle2(index)" @click="change(index)">{{item}}-------{{index}}</li>
        </ul>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                movies: [
                    "海王", "海贼王", "火影忍者", "复仇者联盟"
                ],
                currentIndex: 0,
            },
            methods: {
                change(index) {
                    // this.currentIndex = index
                    if (this.currentIndex === index)
                        return;
                    this.currentIndex = index
                },
                getStyle() {
                    return {
                        active: this.isActive
                    }
                },
                getStyle2(index) {
                    return {
                        active: this.currentIndex === index
                    }
                }
            }
        })
    </script>
</body>
<html>

————————————————
版权声明：本文为CSDN博主「Nanchen_42」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/nanchen_J/article/details/120398356

Hi_KaiSa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
thirty-days-of-vue-fullstackio
10-05
1. **Vue.js基础**：包括Vue实例、模板语法、数据绑定、条件和循环指令、事件处理、组件化开发等。 2. **Vuex状态管理**：Vuex是Vue生态中的状态管理库，用于管理应用的全局状态。学习如何设置store、mutations、...
使用vue+springboot项目实现用户列表开发
02-08
可以使用Vue.js的模板语法结合CSS预处理器如Sass、Less来实现响应式布局，确保列表在不同设备上都有良好的用户体验。 5. **状态管理**：对于复杂的前端应用，可能会用到Vue.js的`Vuex`状态管理库，统一管理全局状态...
vue输出语句_Vue.js 条件语句
weixin_30713183的博客
01-13 451
条件判断v-if条件判断使用 v-if 指令：v-if 指令在元素 和 template 中使用 v-if 指令：现在你看到我了JavaScript中文网学的不仅是技术，更是梦想！哈哈哈，打字辛苦啊！！！new Vue({el: '#app',data: {seen: true,ok: true}})尝试一下 »这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定...
Vue 构造器
GoodIdea
06-26 440
可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：&lt;div id = "vue_det"&gt;&lt;/div&gt;这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。接下来我们看看如何定义数据对象。data 用于定义属性，实例中有三个属性分别为：site、url、alexa。m...
VUE之v-if语句多个条件判断时的写法
seimeii的博客
02-23 1万+
v-if满足某个条件condition = 0时，我们常见写法为： v-if="condition === 0" 假如我想同时满足多个条件时，要怎么写呢？ [ 普通写法] v-if="condition === 0 || condition === 1 || condition === 2" [ 简洁写法] v-if="[0, 1, 2].includes(condition)" <!--括号里可以是字符串和数字--> [ 复杂写法] 标签中： v-if="matchState
template模板中的if判断语句
热门推荐
csq087的博客
07-10 3万+
1.引入jQuery.js&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;2.引入模板&lt;script src="js/jquery.tmpl.js"&gt;&lt;/script&gt;&lt;div class="main_bot"&gt; &lt;i&gt;${data_sourc
Vue——01起步、模板语法、条件语句
NanChen的博客
09-21 207
<div id="box"> <h1 v-pre>{{message}}</h1> </div> <script> var box = new Vue({ el: '#box', data: { message:'你好' }, }) </script> ...
Vue起步03-------模板语法
h1234561234561的博客
05-04 865
01，文本{{name}} 02，html片段v-html="name"【data对象中初始化数据的属性名】 注意：//style中的一条条规则不能含有空格,不然会被当作断字符,从而打上"号 03，v-bind指令特性绑定之布尔特性 注意： ·* 与在html直接表明布尔属性用法略有不同 * html直接填写：属性的存在与否就暗示true/false * vue：null/defined/fals...
Vue起步（模板语法、循环语句）
weixin_55416758的博客
04-12 97
Vue.js起步 每一个Vue应用都需要通过实例化Vue来实现。 实例： <div id="demo1"> <h1>site: {{site}}</h1> <h1>url: {{url}}</h1> <h1>{{details()}}</h1> </div> <script> var vm = new Vue({ el: '#demo1',
vue-router基本概念总结
夕山雨的博客
04-12 1506
目录一、vue-router是什么？二、基本用法1. 起步2. 动态路由3. 嵌套路由4. 命名路由5. 命名视图6. 重定向和别名7. 路由传参8. History模式总结 一、vue-router是什么？ 要搞明白这个问题，你必须先了解什么是单页应用（或叫单页Web应用），以下解释引自百度百科： 单页Web应用（single page web application，SPA），就是只有一张We...
Vue---起步
weixin_34381687的博客
11-19 94
一、Vue是渐进式框架 只关注视图层(view)，一点一点去使用。 二、vue中的两个核心点 1. 响应的数据绑定 当数据发生改变 -> 自动更新视图。 利用Object.definedProperty中的setter/getter代理数据，监控对数据的操作，发生了改变就立即重新渲染。不兼容ie8。关于Object.definedProperty()方法。 单向绑定就是把Mo...
Springboot+vue的公司日常考勤管理系统（有报告），Javaee项目，springboot vue前后端分离项目
04-20
- **数据绑定**: Vue.js的双括号`{{ }}`语法实现数据模型和视图的实时同步。 - **组件化**: Vue.js的组件系统允许开发者创建可复用的UI部件，提高代码的组织性和可维护性。 - **Vuex**: 可能用于管理应用的状态，...
vue+springboot音乐网站（全栈）
06-07
2. **模板语法**：Vue使用双大括号{{ }}进行数据绑定，支持条件语句（v-if/v-else）、循环（v-for）、事件绑定（@）等。 3. **组件化**：Vue的核心特性之一，将UI拆分成可复用的组件，提高代码可维护性。 4. **Vuex*...
基于ssm+vue的电商网站.zip
03-28
2. 模板语法：使用{{ }}插值表达式和v-指令实现动态内容渲染。 3. 组件化：将UI拆分成可复用的组件，提高代码复用性和开发效率。 4. 路由管理：配合Vuex进行状态管理和Vue Router进行页面跳转，实现单页应用的路由...
前端已经学会vue，做粒子效果
wj0712的博客
08-08 597
这些学习内容将帮助你有效地实现粒子效果，并将其整合到你的 Vue 项目中。
vue的diff算法的【双端比较】策略
yiguoxiaohai的博客
08-08 265
vue的diff算法的双端比较策略
10.动态路由绑定怎么做
最新发布
qq_55121347的博客
08-10 519
动态路由绑定怎么做
Vue的所有面试题
本人小可爱
08-06 580
在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作。当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步。执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。页面显示的数据和data中的数据已经保持同步了，都是最新的。
babel-plugin-transform-vue-jsx语法
09-06
babel-plugin-transform-vue-jsx是一个Babel插件，用于将Vue中的JSX语法转换成标准的Vue模板语法。JSX是一种类似于HTML的语法扩展，可以在JavaScript代码中书写类似HTML标签的结构。 使用babel-plugin-transform-vue-jsx，可以在Vue组件中使用JSX语法，从而实现更直观、简洁的模板定义和渲染。该插件会将JSX转换为Vue的render函数，以便在浏览器中进行正确的渲染。 通过使用babel-plugin-transform-vue-jsx，我们可以利用JSX语法的一些优势，例如更易于阅读和维护的代码结构，更灵活的组件组合和复用，以及更好的类型检查和错误提示。 此外，babel-plugin-transform-vue-jsx还支持JSX中的动态属性、事件处理和样式绑定等特性，使得我们能够更方便地操作组件的属性和行为。还可以根据需要配置插件，以适应不同的项目需求。 总而言之，babel-plugin-transform-vue-jsx是一个允许我们在Vue项目中使用JSX语法的Babel插件，通过将JSX转换为Vue模板语法，使得我们能够更灵活、高效地开发和维护Vue组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值