[Vue入门及介绍,基础使用、MVVM架构、插值表达式、文本指令、事件指令]

2021年7月14日 7点热度 0条评论 来源: 刘较瘦丫

[Vue入门及介绍,基础使用、MVVM架构、插值表达式、文本指令、事件指令]

1)定义:javascript渐进式框架

渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目

2)优势:

有指令(分支结构,循环结构...),复用页面结构等
有实例成员(过滤器,监听),可以对渲染的数据做二次格式化
有组件(模块的复用或组合),快速搭建页面

虚拟DOM
数据的双向绑定
单页面应用
数据驱动

3)为什么学习vue:

前台框架:Angular(庞大)、React(精通移动端)、Vue(吸取前两者优势,轻量级)
Vue一手文档是中文
实现前后台分离开发,节约开发成本

关于编辑器的选择

'''
1 ide:
    python--->pycharm,vscode(免费),juptyer    (anaconda)
    go------->goland,vscode(免费)
    java----->IDEA , myeclipse,eclipse
    前端----->webstorm,sublinetext,Hbuilder(nui-app),vscode,pycharm:vue插件
    php------>phpstrom
    c/c++---->clion
    安卓开发---->androidstadio---->谷歌公司买了授权+adt
        
2 捷克的jetbrains公司出的,后期不管做什么语言,简易都用他家的
'''

MVVM架构

MVVM介绍

1 M(数据层)----V(页面展示)----VM(vm)
2 双向数据绑定:JS中变量变了,HTML中数据也跟着改变
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,是一种事件驱动编程方式
​
Model :vue对象的data属性里面的数据,这里的数据要显示到页面中
View :vue中数据要显示的HTML页面,在vue中,也称之为“视图模板” (HTML+CSS)
ViewModel:vue中编写代码时的vm对象,它是vue.js的核心,负责连接 View 和 Model数据的中转,保证视图和数据的一致性,所以前面代码中,
       data里面的数据被显示中p标签中就是vm对象自动完成的(双向数据绑定:JS中变量变了,HTML中数据也跟着改变)
---------------------------------------------------------------------------------
M-V-VM思想:数据的双向绑定(*****)
Model :vue对象的data属性里面的数据,这里的数据要显示到页面中
View :vue中数据要显示的HTML页面,在vue中,也称之为“视图模板” (HTML+CSS)
ViewModel:vue中编写代码时的vm对象,它是vue.js的核心,负责连接 View 和 Model数据的中转,保证视图和数据的一致性,所以前面代码中,data里面的数据被显示中p标签中就是vm对象自动完成的(双向数据绑定:JS中变量变了,HTML中数据也跟着改变)

MVVM的特性

  • 低耦合视图(View)可以独立于Model变化和修改,1个ViewModel可以绑定到不同的View上,当View变化的时候 Model可以不变,当Model变化的时候 View也可以不变
  • 可复用:可以把一些视图逻辑放在1个ViewModel中,让很多View重用这端视图的逻辑(以此减少代码冗余)
  • 独立开发开发人员可以专注于业务逻辑数据的开发(ViewModel),设计人员可以专注于页面设计
  • 可测试:界面元素是比较难以测试的,而现在的测试可以针对ViewModel来编写

单页面开发和组件化开发

组件化开发:
类似于DTL中的include,每一个组件的内容都可以被替换和复用

单页面开发:
只需要1个页面,结合组件化开发来替换页面中的内容
页面的切换只是组件的替换,页面还是只有1个index.html

Vue环境简单搭建:通过script标签导入vue文件即可

"""
1)cdn
<script src="https://cn.vuejs.org/js/vue.js"></script>  

2)本地导入
<script src="js/vue.js"></script>
"""

挂载点el

"""
/** el: 挂载点

* 1)一个挂载点只能控制一个页面结构(优先匹配到的结构)
* 2)挂载点挂载的页面标签严格建议用id属性进行匹配(一般习惯用app)
* 3)html标签与body标签不能作为挂载点(html和body标签不可以被替换,组件中详细介绍)
* 4)是否接受vue对象,是外界是否要只有vue对象的内容决定的

*/
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>

</head>

<body>

    <div id="d1">
	
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#d1',   # 将id为d1的div 挂载
  	
    })

</script>
</html>

插值表达式 模板语法

"""
 /** 插值表达式
     * 1)空插值表达式:{{ }}
     * 2)中渲染的变量在data中可以初始化
     * 3)插值表达式可以进行简单运算与简单逻辑
     * 4)插值表达式符合冲突解决,用delimiters自定义(了解)
     */
"""
<div id="app">
    <p>{{ info }}</p>
    <p>{{ msg }}</p>
    <p>{{ }}</p>
    <p>{{num}}</p>
    <p>{{num + 10 * 2}}</p>   # 可做运算
    <p>{{ msg.length + num }}</p>
    <p>{{ msg[4] }}</p>   # 可索引取值
    <p>{{ msg.split('')[4] }}</p>  # 可按指定字符切分,切分后去索引4
    <p>[{ num }]</p>
    
     <input type="text" v-model="name">
</div>
<script>
	// 实例化得到一个vue对象,传入一些参数,
    var vm = new Vue({
        el: '#app',   # el挂载
        data: {
            info: '信息',
            msg: 'message',
            num: 10,
            name: 'dsb'
        },
        // 控制vue插值表达式符合
        delimiters: ['[{', '}]'],
    })
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值语法:放js变量或语法</title>
    <script src="./js/vue.js"></script>
</head>
<body>


<div id="app">

    <p>
        名字:{{name}}
    </p>
    <p>
        数组:{{t}}
    </p>
    <p>
        数组的第一个值:{{t[1]}}
    </p>

    <p>
        对象:{{obj}}
    </p>
    <p>
        对象取值:{{obj.name}}
    </p>


    <p>
        s字符串:{{s}}
    </p>
        条件?值:值
    <p>三目运算符: {{100>20?'是':'否'}}</p>
</div>


</body>
<script>


    var a =10>20?'是':'否'

    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            t: ['张三', '李四', 1],
            obj: {name: 'lqz', age: 19},
            s: '<a href="http://www.baidu.com">点我看美女</a>'
        }
    })
</script>

</html>

指令之文本指令

v-html 让HTML字符串渲染成标题

v-text 标签内容显示js变量对应的值

v-show 放1个布尔值:为真 标签就显示;为假 标签就不显示

v-if 放1个布尔值:为真 标签就显示;为假 标签就不显示

"""
/**
* 1) v-* 是vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义)
* 2)v-text是原样输出渲染内容,渲染控制的标签自身内容会被替换掉(<p v-text="num">123</p>会被num替换)
* 3)v-html可以解析渲染html语法的内容
*/
v-show	放1个布尔值:为真 标签就显示;为假 标签就不显示
v-if	放1个布尔值:为真 标签就显示;为假 标签就不显示

v-show与 v-if的区别:
v-show:标签还在,只是不显示了(display: none)
v-if:直接操作DOM,删除/插入 标签

4)补充
<!-- js基本数据类型:字符串、数字、布尔、undefined -->
<p v-text="'abc' + num + 10"></p>
<p>{{ 'abc' + num + 10 }}</p>
"""
<body>
    <div id="app">
        <p>{{ num | add(300) }}</p>

        <p v-text="num"></p>
        <p v-text="num">123</p>

        <p v-text="info"></p>
        <p v-html="info"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 100,
            info: '<i style="color: red">info内容</i>'
        },
        filters: {
            add: function (a, b) {
                return a + b;
            }
        }
    })
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本指令</title>
    <script src="./js/vue.js"></script>	
</head>
<body>


<div id="app">

    <div v-html="s"></div>
    <hr>

    <p v-text="name"></p>
    <span>{{name}}</span>

    <hr>
<!--        <div v-show="false">我是个div</div>-->
        <div v-show="show">我是个div--v-show</div>

    <hr>
    <div v-if="show">我是个div--v-if</div>

    <hr>
    <h1>通过点击按钮实现div显示与不显示</h1>
    <button @click="handleClick">点我显示/不显示</button>

    <h1 v-show="show_h1">我是一个h1标题</h1>



</div>


</body>
<script>


    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            s: '<a href="http://www.baidu.com">点我看美女</a>',
            show:true,
            show_h1:true
        },
        methods:{
            handleClick(){
                // alert('11111')
                // this.$data.show_h1=false

                this.show_h1=!this.show_h1
            },
        }
    })
</script>

</html>

指令之事件指令

v-on:事件	     触发事件(不推荐)
@事件	         触发事件(推荐)  与↑ 效果一样
@[event]	  触发event事件(可以是其他任意事件)

"""
/**
 * 一、数据驱动
 *  1)操作是一个功能,使用需要一个方法来控制 
 	2)方法名是变量,所以控制变量就可以控制该方法
 *
 *
 * 二、事件指令
 *  1)在实例成员methods中声明事件方法
 *  2)标签通过事件指令绑定声明的方法: v-on:事件名="事件方法名"
 *      eg: <button v-on:click="btnClick">按钮</button>
 *  3)标签通过事件指令绑定声明的方法,且自定义传参: v-on:事件名="事件方法名()"
 *      eg: <button v-on:click="btnClick()">按钮</button>  不传任何参数
 *      eg: <button v-on:click="btnClick($event)">按钮</button>  传入事件对象,同不写()
 *      eg: <button v-on:click="btnClick(10)">按钮</button>  只传入自定义参数,当然也可以传入事件对象
 */
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
​
<div id="app">
    <h1 v-html="link"></h1>
    <h1 v-text="name"></h1>
    <h1 v-text="link"></h1>
    <h1></h1>
​
    <button @click="handleClick">若隐若现</button>
    # @click="handleClick"  与 v-on:click="handleClick" 一样
    
    <div v-show="show">
        <h2>我只要你一滴泪的时间,听你形容他狠心的脸</h2>
    </div>
​
​
    <button @click="handle1">点我</button>
    <div v-if="if_show">
        <h2>那些快乐的梦都变丑了,你看不见吗</h2>
    </div>
​
    <div></div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'geng',
            link: '<a href="http://www.baidu.com">点我</a>',
            show: true,
            if_show: true
        },
        methods: {
            handleClick() {
                this.show = !this.show
            },
            handle1() {
                this.if_show = !this.if_show
            }
        }
    })
</script>
</html>
    原文作者:刘较瘦丫
    原文地址: https://www.cnblogs.com/liupengfei1123/p/15008808.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。