Vue框架

Posted 2020-11-29 zhangmingyong

目录

• Vue基础
  • 渐进式JavaScript框架
  • 什么是Vue
  • 有什么特点
  • Vue的挂载点
  • Vue过滤器
• Vue指令
  • 文本指令
  • 事件指令
  • 属性指令

Vue基础

渐进式javascript框架

通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

什么是Vue

可以独立完成前后端分离web项目的Javascript框架

有什么特点

单页面web应用

数据驱动

数据的双向判定

虚拟DOM

Vue的挂载点

new Vue({
        el: '#app',
    })

el为挂载点，才有css3选择器语法与页面标签进行绑定，决定该vue对象控制的页面范围
1.挂载点只检索页面中第一个匹配到的结果，所以挂载点一般都才有id选择器
2.html与body标签不可以作为挂载点（组件中解释）

Vue过滤器

<div id="app">
        <!-- 默认将msg作为参数传给filterFn -->
        <p>{{ msg | filterFn }}</p>

        <!--过滤器串联-->
        <p>{{ num | f1 | f2 }}</p>

        <!--可以同时对多个变量进行过滤，变量用，分割，过滤器还可以额外传入参数辅助过滤-->
        <!--过滤器方法接收所有传入的参数，按传入的位置进行接收-->
        <p>{{ msg, num | f3(950, '好的') }}</p>
    </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本内容',
            num: 1
        },
        filters: {
            filterFn(v1, v2) {
                // console.log(v1);
                // console.log(v2);
                return `<b>${v1}</b>`;
            },
            f1(v1) {
                return v1 * 100;
            },
            f2(v1) {
                return v1 * 100;
            },
            f3(v1, v2, v3, v4) {
                console.log(v1);
                console.log(v2);
                console.log(v3);
                console.log(v4);
            }
        }
    })

Vue指令

文本指令

<div id="app">
1、插值表达式，能完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；) 
        <p>{{ msg }}</p>
        <p>{{ msg + '拼接内容' }}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.slice(2, 4) }}</p>
2、v-text：将所有内容做文本渲染
        <p v-text="msg + '拼接内容'"></p>
3、v-html：可以解析html语法标签的文本 
        <p v-html="'<b>' + msg + '</b>'"></p>
        
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本信息'
        }
    })

事件指令

事件指令：v-on:事件名="事件函数" 
<p v-on:click="f1">被点击了{{ count }}下</p>
简写：@事件名="事件函数"
<p @click="f1">{{ count }}</p>
绑定的事件函数可以添加()，添加括号就代表要传递参数
<ul>
<li @click="f3(100)">{{ arr[0] }}</li>
<li @click="f3(200)">{{ arr[1] }}</li>
<li @click="f3(300)">{{ arr[2] }}</li>
</ul>
绑定的事件函数如果没有传递参数，默认传入 事件对象
注意：事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event

属性指令

1.属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量"
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
2.属性指令操作 style 属性
<div style="width: 200px;height: 200px;background-color: greenyellow"></div>
通常：变量值为字典
<div :style="mys1"></div>
了解：{中可以用多个变量控制多个属性细节}
 <div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>