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

时间：2023-03-08 16:36:57

[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中数据也跟着改变）

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

MVVM的特性

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

单页面开发和组件化开发

组件化开发：

类似于DTL中的include，每一个组件的内容都可以被替换和复用

单页面开发：

只需要1个页面，结合组件化开发来替换页面中的内容

页面的切换只是组件的替换，页面还是只有1个index.html

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

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>