ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-09-21 10:05:41  阅读:125  来源: 互联网

标签:语句 box Vue el new message data 模板


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

通过以下代码获取Vue.js

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

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

命令式编程(原生JS):

  1. 创建div元素,设置id属性
  2. 定义一个变量叫message
  3. 将message变量放在div元素中显示
  4. 修改message数据
  5. 将修改的元素替换到div

声明式编程(Vue):

  1. 创建一个div元素,设置id属性
  2. 定义一个vue对象,将div挂载在vue对象上
  3. 在vue对象内定义变量message,并绑定数据
  4. 将message变量放在div元素上显示
  5. 修改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标签

 

 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循环语句见下章节

标签:语句,box,Vue,el,new,message,data,模板
来源: https://blog.csdn.net/nanchen_J/article/details/120398356

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有