VUE

1)、 MVVM思想

M:即 Model,模型,包括数据和一些基本操作
V:即view,视图,页面渲染结果
WM:即 View-Model,模型与视图间的双向操作(无需开发人员干涉)

在MWM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作 Model渲染
到vew中。而后当用户操作视图,我们还需要通过DOM获取vew中的数据,然后同步到
Mode中

而MWM中的WM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心 Model
和vew之间是如何互相影响的

只要我们Mde发生了改变,view上自然就会表现出来
当用户修改了vew,Moe中的数据也会跟着改变

把开发人员从繁琐的DoM操作中解放出来,把关注点放在如何操作Mode上。

2)、Vue简介

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。

3)、入门使用

创建环境先要安装 node.js环境，可能的话也需要 py3的环境（注意配置环境变量）

创建一个文件夹，并使用 npm init -y 和 npm install vue初始化工程，之后文件夹下就会有一个它创建的 node_nmodules文件夹

创建html，引入 vue.js

<script src = "./node_modules/vue/dist/vue.js"></script>
<script>
// vue.js 代码****
</script>

创建vue对象

let vm = new Vue({
    el: "#app",
    data: {
        name: "张三",
        num: 20
    }
});

代码

<dev id="app">
    <input type="text" v-model="num"><button v-on:click="num++">点赞</button>
    <br>
    <input type="text" ref="input1"> <button v-on:click="updateName()">修改姓名</button>
    <h1>{{name}},好帅,已有{{num}}人点赞</h1>
</dev>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app", # 绑定元素
        data: { # 封装数据
            name: "张三",
            age: 20,
            num: 1
        },
        methods: { # 方法全部写在这里面
            updateName() {
                this.name = this.$refs.input1.value;
            }
        }
    });
</script>

  - 在浏览器中打开，会发现   **张三,好帅** 在页面上，打开控制台  输入 **vm.name="xxx"**,回车后会发现页面会跟着变化,
  - 在input标签中使用了 **v-model 双向绑定**，直接绑定 vm 中的 num ,修改input框中的值，页面上的数字也会改变
  - 在button标签中使用了 **v-on:click="num++"**，事件处理，当点击时，就会执行 num++操作
  - 在第二个input框中输入 然后点击 修改名字，会发现 名字被修改了

4)、指令

1、插值表达式

1)、花括号
格式:{{表达式}}
说明：
- 该表达式支持语法,可以调用内置函数(必须有返回值)
- 表达式必须有返回结果。例如1+1,没有结果的表达式不允许使用,如:let a=1+1;
- 可以直接获取vue实例中定义的数据或函数
2)、插值闪烁
使用 {{}} 方式在网速较慢时会出现问題。在数据未加载完成时,页面会显示出原始的
加载完毕后才显示正确数据,我们称为插值闪烁。
v-text、v-html
- v-text：v-text = "msg" 不会解析msg中的html，会将msg中的内容全部显示
- v-html：v-html = "msg" 会解析msg中的html，使其转化为html元素
这两个指令的有点比普通的插值表达式（{{msg}}）好在：当网络不好时，刷新页面插值表达式会出现 {{msg}}字样，对用户不友好，而使用这两个指令则只有当页面刷新出时才会渲染

<dev id="app">
    {{msg}} {{1+2}} {{hello()}} <br>
    <span v-html="msg"></span> <br>
    <span v-text="msg"></span>
</dev>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "<h1>Hello</h1>",
            link: "https://www.baidu.com"
        },
        methods: {
            hello() {
                return "word";
            }
        },
    });
</script>

2、v-bind:单向绑定

**语法： v-bind:标签 ** 或者 :标签（省去v-bind)

<dev id="app">
    <a v-bind:href="link">gogogo</a>
    <!-- v-bind 对 class 和 style 有增强效果
		'text-danger':当有其他符号时需要使用 '' 将其包裹
	-->
    <span v-bind:class="{active:isActive,'text-danger':hasError}"
        :style="{color: color1,fontSize: size}">
        你好呀
    </span>
</dev>

<script src = "../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            link: "https://www.baidu.com",
            isActive: true,
            hasError: true,
            color1: "red",
            size: "19px"
        }
    });

</script>

当在浏览器控制台中修改 vm 的属性时，他的class和style会随着改变而改变

3、v-model:双向绑定

将表单中的某一项于数据进行绑定

<!-- 表单项，自定义组件 -->
<dev id = "app">
    精通的语言：
        <input type="checkbox" v-model = "language" value="Java">Java <br>
        <input type="checkbox" v-model = "language" value="PHP">PHP <br>
        <input type="checkbox" v-model = "language" value="MySQL">MySQL <br>
    选中了： {{language.join(",")}}
</dev>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            language: []
        }
    });
</script>

4、v-on: 绑定时间

v-on:事件 === @事件

基本用法

<h1>有 {{num}} 个赞</h1>
<!--1、事件中直接写js片段 -->
<button v-on:click="num++">点赞</button>
<!-- 2、事件指定一个回调函数，必须时Vue实力中定义的函数 -->
<button @click = "cancle">取消点赞</button>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            cancle() {
                if (this.num > 0) {
                    this.num--;
                } else{
                    return;
                }
            },
            hello() {
                alert("点击了")
            }
        }
    });
</script>

事件修饰符

在事件处理程序中调用 event.prevent Default0或' event.stop Propagation是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑而不是去处理DOM事件细节。

为了解决这个问题,wues为von`提供了事件修饰符。修饰符是由点开头的指令后缀来表示的

stop:阻止事件冒泡到父元素
prevent:阻止默认事件发生
capture:使用事件捕获模式
sef:只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
once:只执行一次

<!-- 事件修饰符 -->
<!-- 当加上了 .once 之后，点击第一次时才弹框，后面就不会再弹框 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
    大div

    <!--当店 小div时 加上了 .stop 就不会事件冒泡，只会弹窗一次，而没有这个 .stop 会弹窗 2 次 -->
    <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
        小div <br />
        <!-- 当点这个超链接时 不加 .prevent  会弹窗2次，再跳转到百度，加上之后，只弹窗 2 次
            当加上 .prevent.stop 时，仅弹窗 1 次
        -->
        <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
    </div>
</div>

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue允许为 v-on在监听键盘事件时添加按键修饰符

<!-- 按键修饰符： -->
        <!-- 点击 向上键 num+2 向下键 -2 按住ctrl再点鼠标左键 num=10 -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2"
         @click.ctrl="num=10"><br />

全部的按键别名:
enter、tab、delete、esc、space、up、down、left、right

5、v-for :遍历元素

v-for = "(当前元素 ,当前索引) in 数组" :key="当前元素 . 唯一字段"

v-for = "(k,v,当前索引) in 对象"

<dev id = "app">
    <ul>
        <li v-for="(user,index) in users" :key="(user.name)">
            <!-- 1、显示 user 信息 v-for = "item in items" -->
            当前索引： {{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br>
            <!-- 2、获取数组下标：v-for = "(item,index) in items" -->
            <!-- 3、遍历对象：
                    v-for = "value in object"
                    v-for = "(value,key) in object"
                    v-for = "(value,key,index) in object"
            -->
            对象信息：
            <span v-for = "(v,k,i) in user " >{{k}} ==> {{v}} ==> {{i}}</span>
            <!-- 4、遍历的时候都加上 :key 来区分不同的数据，提高效率
                                    :key 绑定一个唯一值就行
            -->
        </li>
    </ul>
</dev>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>         
    let app = new Vue({
        el: "#app",
        data: {
            users: [{ name: '柳岩', gender: '女', age: 21 },
            { name: '张三', gender: '男', age: 18 },
            { name: '范冰冰', gender: '女', age: 24 },
            { name: '刘亦菲', gender: '女', age: 18 },
            { name: '古力娜扎', gender: '女', age: 25 }],
            nums: [1,2,3,4,4]
        },
    })
</script>

6、v-if、v-show

v-if = "条件"

v-show = "条件"

区别： v-if 当条件为false时，直接没有了标签，而 v-show 是改变 css 样式，将其置为 display

5、计算属性、侦听器、过滤器

计算属性

在Vue对象中，存在 computed 属性，就是用来计算属性的；这个属性中，可以定义方法等

侦听器

用 watch 属性来侦听 Vue 对象的属性变化

<div id="app">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
        <ul>
            <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
            <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
            <li>总价：{{totalPrice}}</li>
            {{msg}}
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                xyjNum: 1,
                xyjPrice: 38.0,
                shzNum: 1,
                shzPrice: 38.9,
                msg: ""
            },
            computed: { // 计算属性
                totalPrice() {
                    return this.xyjNum * this.xyjPrice + this.shzNum * this.shzPrice;
                }
            },
            watch: {  // 侦听器
                // xyjNum(newVal, oldVal){...} 等同于下面这个函数定义
                xyjNum: function (newVal, oldVal) { // 监听 xyjNum这个属性
                    if (newVal >= 3) { // 只要新值 >3 就改变 msg 提示
                        this.msg = "库存超出限制！";
                        this.xyjNum = 3;
                    } else {
                        this.msg = "";
                    }
                }
            },
        });
    </script>

局部过滤器--写在Vue的属性中

filters 属性，在filter 属性中写函数，然后再 html 中使用 | (管道符) 来调用函数进行过滤

<body>
    <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}}
                <!-- | 是管道符，前面的值传入后面的函数，然后返回对应的值 -->
                ==> {{user.gender | genderFilter}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jack', gender: 1 },
                    { id: 2, name: 'xiaohong', gender: 0 }
                ]
            },
            filters: {
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        });
    </script>
</body>

使用过滤器可以代替管道符

全局过滤器--使用 Vue.filter(){}写在

posted @ 2020-05-21 13:57 qiuqiup 阅读(113) 评论(0) 收藏举报

刷新页面返回顶部

qiuqiup

VUE

1)、 MVVM思想

2)、Vue简介

3)、入门使用

创建环境先要安装 node.js环境，可能的话也需要 py3的环境（注意配置环境变量）

4)、指令

1、插值表达式

v-text、v-html

2、v-bind:单向绑定

3、v-model:双向绑定

4、v-on: 绑定时间

基本用法

事件修饰符

按键修饰符

5、v-for :遍历元素

6、v-if、v-show

5、计算属性、侦听器、过滤器

计算属性

侦听器

局部过滤器--写在Vue的属性中

全局过滤器--使用 Vue.filter(){}写在

公告

qiuqiup

VUE

1)、 MVVM思想

2)、Vue简介

3)、入门使用

创建环境 先要安装 node.js环境，可能的话也需要 py3的环境（注意配置环境变量）

4)、指令

1、插值表达式

v-text、v-html

2、v-bind:单向绑定

3、v-model:双向绑定

4、v-on: 绑定时间

基本用法

事件修饰符

按键修饰符

5、v-for :遍历元素

6、v-if、v-show

5、计算属性、侦听器、过滤器

计算属性

侦听器

局部过滤器--写在Vue的属性中

全局过滤器--使用 Vue.filter(){}写在

公告

创建环境先要安装 node.js环境，可能的话也需要 py3的环境（注意配置环境变量）