首页 > 其他分享 >Vue 入门。

Vue 入门。

时间:2022-11-16 20:33:30浏览次数:34  
标签:el Vue return 入门 绑定 msg name

一、Vue是一套渐进式的前端框架,简化了JavaScript中的DOM操作,Vue 基于 MVVM (Model-View_ViewModel)思想,实现数据的双向绑定。

二、Vue的简单使用。

1、引入 Vue.js 文件。<script src="js/vue.js" />

2、在JS区域中创建 Vue 核心对象进行数据绑定。

new Vue({

  el:目的地,

  template:模板内容,

  date(){

    return {

    }

  }

});

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <h3>{{ msg }}</h3>
        <p>{{ msg2 }}</p>
    </div>
    <!-- 1.引包 -->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // MVVM    Model  View  ViewModel
        
        //2.创建实例化vue对象
        // 插值模板语法 {{ }}  react: {} angular {{}}
        new Vue({
            el:"#app", //目的地
            template:``, //模板内容
            data :function(){
                // 声明的数据
                return {
                    msg:'大家学习vue3',
                    msg2:1==1
                }
            }
        });
    </script>
</body>
</html>

 三、Vue 的插值表达式 {{}}。可以用于页面中简单粗暴的调试,必须在data这个函数中返回的对象中声明。

1、对象 {{ { name: 'tom'} }}。注意:不要连续3个{},错误示范:{{{name: 'tom'}}}。

2、字符串 {'xxx'}。

3、判断后的布尔值 {{ true }}。

4、三元表达式  {{true?'正确':'错误'}}。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <h3>{{ msg }}</h3>
        <h4>{{ {name:'tom'} }}</h4>
        <p>{{ msg2 }}</p>
        <p>{{1 > 2 ? '真的': '假的'}}</p>
    </div>
    <!-- 1.引包 -->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // MVVM    Model  View  ViewModel
        
        //2.创建实例化vue对象
        // 插值模板语法 {{ }}  react: {} angular {{}}
        new Vue({
            el:"#app", //目的地
            template:``, //模板内容
            data :function(){
                // 声明的数据
                return {
                    msg:'大家学习vue3',
                    msg2:1==1
                }
            }
        });
    </script>
</body>
</html>

四、Vue 中的指令。在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示;指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定。

1、v-text:只能用在双标签中,其实就是给元素的InnerText属性赋值,跟 {{}} 效果是一样的,使用较少。

2、v-html:其实就是给元素的 innerHTML 属性赋值。

<div v-html = 'msg2'></div>

 

3、v-if:判断是否插入这个元素,相当于对元素的销毁和创建。

  v-else-if:v-if 和 v-else-if 都有对应的值

  v-else:而 v-else 直接写,v-if 家族都是对元素进行插入和移除操作。

<div v-if = 'isShow'>哈哈哈哈</div>
<div v-if = 'Math.random() > 0.5'>
    此值大于0.5
</div>
<div v-else>
    此值小于0.5
</div>

 

4、v-show:隐藏元素,如果确定要隐藏元素,会给元素的 style 加上 display:none,这是基于 css 样式的切换显示与否的问题。

<div v-show = 'isShow'></div>

 

5、v-if 和 v-show 的区别。

  v-if 是真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。   v-if 也是惰性的,如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。   相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。   一般来说,v-if 有更高的切换开销,而 v-show`有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show`较好;如果在运行时条件很少改变,则使用 v-if 较好。

6、v-bind:绑定属性值,给元素的属性赋值 <div id="{{变量}}"></div>

  可以给已存在的属性赋值,如input value

  也可以给自定义的属性复制赋值,如myData

  语法 在元素上 v-bind:属性名="常量||变量"

  简写形式 :属性名="变量"

 

<div v-bind:原属性名="变量"></div>
<div :属性名="变量">
</div>

 

7、v-for: 可遍历数组或对象。

  基本语法:v-for=“item in arr”

  对象的操作:v-for=“item in obj”

  如果数组中没有 id  v-for="(item,idex) in arr "

  各种 v-for 的属性顺序:数组 item,index; 对象value,key,index

<ul>
    <li v-for = '(item,index) in menuLists'>
        <h3>{{ index }}</h3>
        <h5>{{item.name}}</h5>
        <h4>{{item.price}}</h4>

    </li>
</ul>
<ul>
    <li v-for = '(value,key) in object'>
        {{ key }} -- {{value}}
    </li>
</ul>   

8、v-on:绑定事件,处理自定义原生事件的,给按钮添加click并让使用变量的样式改变。

  普通使用 v-on:事件名="表达式||函数名"

  简写方式 @事件名=“表达式”

  <script type="text/javascript">
        new Vue({
            el:'#app',
            template:`
                <div>
                    <p class ='po' :class=" {active:isRed} " >bing绑定</p>
                    <button @click = 'changeColor'>切换字体的颜色</button>
                </div>
            `,
            data:function(){
                return {
                    // msg:'active'
                    isRed:false
                }
            },
            methods:{
                changeColor(e){
                    console.log(e.target)
                    console.log(this);
                    this.isRed = !this.isRed;
                }
            }
        });
    </script>

9、v-model: 双向数据流绑定,页面改变影响内存(js),内存(js)改变影响页面。

    <script type="text/javascript">
        new Vue({
            el:'#app',
            template:`
                <div>
                    <input type="text"  v-model = 'msg'/
                    <p>{{ msg }}</p>
                </div>
            `,
            data:function(){
                return {
                    msg:'hello 双向绑定'
                }
            }
        });

10、v-bind 和 v-model 的区别。

  input v-model="name"    双向数据绑定,页面对于 input 的 value改变,能影响内存中的 name 变量。内存js改变 name 的值,会影响页面重新渲染最新值。

  input :value="name"    单向数据绑定,内存改变影响页面改变。

  v-bind就是对属性的简单赋值,当内存中值改变,还是会触发重新渲染。

总结:v-model 值的改变可以影响其他;v-bind 值的改变不影响其他,但与事件的结合可实现和 v-model 一样的效果。

    <script type="text/javascript">
        new Vue({
            el:'#app',
            template:`
                <div>
                    <!-- <input type="text"  v-model = 'msg'/>-->
                    <input type="text"  v-bind:value = 'msg' v-on:input = 'change'/>
                    <p>{{ msg }}</p>
                </div>
            `,
            data:function(){
                return {
                    msg:'hello 双向绑定'
                }
            },
            methods:{
                change(e){
                    console.log(e.target.value);
                    this.msg = e.target.value;
                }
            }
        });
    </script>

 

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div id="app"><h3>{{ msg }}</h3><h4>{{ {name:'tom'} }}</h4><p>{{ msg2 }}</p><p>{{1 > 2 ? '真的': '假的'}}</p></div><!-- 1.引包 --><script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript">// MVVM    Model  View  ViewModel//2.创建实例化vue对象// 插值模板语法 {{ }}  react: {} angular {{}}new Vue({el:"#app", //目的地template:``, //模板内容data :function(){// 声明的数据return {msg:'大家学习vue3',msg2:1==1
}}});</script></body></html>

标签:el,Vue,return,入门,绑定,msg,name
From: https://www.cnblogs.com/sfwu/p/16894716.html

相关文章

  • 3 、Vue 【进阶】- diff 算法(2), 【包含完整 patchNode】
    Vue【进阶】-diff算法(2),【包含完整patchNode】前言上一讲https://www.cnblogs.com/caijinghong/p/16879388.htmldiff算法讲了:虚拟dom文件位置seter触发后的......
  • Nginx快速入门
    参考文章:https://www.kuangstudy.com/bbs/1353634800149213186公司产品出现瓶颈?我们公司项目刚刚上线的时候,并发量小,用户使用的少,所以在低并发的情况下,一个jar包启动应用......
  • Logstash 入门实战(4)--filter plugin 介绍
    本文主要介绍Logstash的一些常用过滤插件;相关的环境及软件信息如下:CentOS 7.9、Logstash8.2.2。1、grok过滤插件grok是一种将行与正则表达式匹配,将行的特定部分映射到......
  • 小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)?
    小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)?自2017-1-9微信小程序诞生以来,历经2年多的迭代升级,已有数百万小程序上线,成为继Web、iOS、Android之后,第四大主流开发技......
  • ArcGIS Python API可视化及分析系列教程(一):入门与简介(2)安装与配置
    前文再续,本节主要讲安装……前置要求:1、有Python软件安装的经验。2、离线安装的话,需要有ArcGISJavascriptAPI部署经验和能力。如果这两个都从来没有弄过的话,就用在线的......
  • 尚硅谷vue课程之数据绑定
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • VUE对象数组,和普通数组的常用方法
    在VUE中也可以使用find,findIndex,map等方法对数组对象进行查询,赋值等操作,记录一下定义数组对象 vararrobj=[{"id":1,"keyword":"羽绒服","times":1000},{"id":2,"k......
  • 记录vue-pdf文件流预览出现空白的问题
    因为工作需要引用pdf插件,于是找到了vue-pdf,具体用法并不难,我先贴上代码:先引入组件importpdffrom'vue-pdf'布局如下:<pdf:src="pdf......
  • vue使用qrcodejs2进行二维码显示以及下载
    1、安装qrcodejs2npminstallqrcodejs2/yarnaddqrcodejs22、引入qrcodejs2importQRCodejsfrom'qrcodejs2';3、使用html:<divref="locatorQRCodeRef"></......
  • Bootstrap概述、快速入门
    Bootstrap概述概念:一个前端开发的框架,Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML,CSS,JavaScript的,它简洁灵活,使得Web开发更加快捷框架:一个......