Vue基本用法

作者: 我家有个王胖胖 | 来源:发表于2022-02-16 14:13 被阅读0次

Vue基本用法
Vue的基本属性&&事件
vue
Vue的模板语法
vue ssr原理
vue element-ui 入门
vue的基本用法
如何更好的胜任工作(开篇前)
08.vue2.0-vue-cli
深入浅析Vue中的Prop

Vue:渐进式javascript框架
声明式渲染-->组件系统-->客户端路由-->集中状态管理-->项目构建

Vue的基本使用

<div id="app">
        {{msg}}//插值表达式
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
        /** Vue的基本使用步骤
          1.需要提供标签用于填充数据
          2.引入vue.js库文件
          3.可以使用vue的语法功能
          4.使用vue提供的数据填充标签
         **/
        var vm = new Vue({
            el:'#app',
            data: {
                msg:"Hello Vue"
            }
        });
    </script>

//也可以这样手动挂载
var vm = new Vue({
    data: {
         msg:"Hello Vue"
     }
 }).$mount('#app');

Vue的两种挂载方式:

vue中的$mount和el两者在使用中没有什么区别，都是将实例化后的vue挂载到指定的DOM元素中

用法：

如果在实例化vue时指定el，则该vue将会渲染在el对应的DOM中

反之 没有指定el，则vue实例会处于一种“未挂载”的状态，此时通过$mount来手动执行挂载

new vue时候$mount和el并没有什么本质上的不同

模板语法:
1.插值表达式
存在闪动问题:快速刷新浏览器时,有时会显示{{xxx}}内容,然后替换为要显示的值.解决的办法-->指令(先隐藏,替换好值之后再显示)
2.指令(指令的本身就是自定义属性)
以v-开头例如v-cloak
html:

<div id="app">
    {{context}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            context:'Hello Vue'
        }
    });
</script>

效果:

sd.gif

使用v-cloak
html:

<div id="app" v-cloak>
    {{context}}
</div>

css:

[v-cloak]{
    display: none;
}

效果:

v-cloak.gif

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

双向数据绑定:v-model

2.MVVM私享
M(model)
V(view)
VM(view-model)

image.png

mvc,mvp和mvvm的区别:
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

3.事件绑定
事件冒泡和事件捕获
3.1v-on指令
示例:

<div id="app">
      <div>{{num}}</div>
      <button v-on:click="num++">增加</button>
</div>
//简写方式
//<button @click="num++">增加</button>

效果:

v-on.gif

3.2事件函数的调用方式
html:

<div id="app">
      <div>{{num}}</div>
      <button v-on:click="add">增加</button>
    </div>

var vm = new Vue({
        //el:'#app',
        data: {
          msg: "Hello Vue",
          num: 1,
        },
        methods: {
            add(){
                this.num++;
            }
        }
      }).$mount("#app");

3.3事件函数参数传递
普通参数和事件对象

html:
<button v-on:click="add(2,$event)">增加</button>
js:
methods: {
            add(val,event){
                console.log(val);//2
                console.log(event.target.tagName);//BUTTON
                this.num = this.num + val;
            }
        }

事件参数说明.jpg

3.4事件修饰符
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

html:

<div id="app">
      <div>{{num}}</div>
      <div @click="handel1">
          <button @click="handel2"></button>
      </div>
    </div>

js:

methods: {
       handel1(){
            this.num++;
       },
       handel2(event) {
            event.stopPropagation();//阻止冒泡
      }}

效果:

冒泡.gif

//vue 阻止冒泡
<button @click.stop="handel2">增加</button>

e.prevent等同于
event.preventDefault()

<a href="http://www.baidu.com" @click.prevent="handel2">跳转百度</a>
<form @submit.prevent></form>

3.5按键修饰符
在Vue中可以通过config.keyCodes自定义按键修饰符别名
示例:Vue.config.keyCodes.aaa = 65;

<div id="app">
    预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法
    <input type="text" v-on:keydown.f5="prompt()">
</div>

<script>
    
    Vue.config.keyCodes.f5 = 116;

    let app = new Vue({
        el: '#app',
        methods: {
            prompt: function() {
                alert('我是 F5！');
            }
        }
    });
</script>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

自定义按键:

<div id="box">
        <input type="text" placeholder="请输入" @keyup.enter="show($event)"> 

        <input type="text" placeholder="请输入" @keyup.13="show($event)">
    </div>

当你按下键盘，键盘的值为13的时候，将会执行show函数方法

以上两种keyup和keyup.13方法是一样的，点击回车按键，就会执行 alert 方法

//常用keycode
       @keyup.13 回车

　　@keyup.enter 回车

　　@keyup.left 左键

　　@keyup.right 右键

　　@keyup.up 上键

　　@keyup.down 下键

　　@keyup.delete 删除键

4.属性绑定
v-bind指令:被用来响应地更新 HTML 属性

html:

<div>
    <a v-bind:href="url">百度</a>
</div>

js:

data: {
      url:'https://www.baidu.com/'
}

效果:

href.gif

5.v-model的实现原理分析
①

<input type="text" v-bind:value="msg" v-model='msg'>

等价于
②

<div>
        <input type="text" v-bind:value="msg" v-on:input='handel1'>
//或
        <input type="text" v-bind:value="msg" v-on:input='handel2(msg = $event.target.value)'>
        
</div>

handel1(event){
      this.msg = event.target.value;
},

第一种实现只是后面两种写法的语法糖.
当在input元素中使用v-model实现双数据绑定，其实就是在输入的时候触发元素的input事件，通过这个语法糖，也能够实现父子组件数据的双向绑定.
父组件:

image.png

子组件:

image.png

6.样式绑定v-bind:class
1️⃣class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
①动态切换多个class
html

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'error': isError }">
  </div>
<button class="handel">切换</button>
</div>

css

<style>
.active{
            height: 100px;
            width: 100px;
            border: 1px solid red;
        }
        .error{
            background-color: orange;
        }

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    isError: true
  }
})
</script>

效果:

class.gif

②样式绑定到对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定class</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      text-danger: true
    }
  }
})
</script>
</body>
</html>

③数组语法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue class 数组</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.error {
    background: red;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'error'
  }
})
</script>
</body>
</html>

默认class会被保留合并

<div class="base" v-bind:class='objClass'>哈哈</div>
data:{
                objClass:{
                    active:true,
                    error:true
                }
            },

image.png

2️⃣style

image.png

三元表达式:

<a :href="con.subTitleHref" target="_self"
:style="{color:(index==0?arr.conFontColor:'#000')}" >
{{con.subTitle}}
</a>

7.分支循环结构
7.1

v-if
v-else
v-else-if
v-show

v-show与v-if的区别:

v-show:

v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的
语法表达v-show = " 表达式 "
原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏
指令后面的内容最终都会解析为布尔值
值为真(true)的时候元素显示，值为假(false)的时候元素隐藏
数据改变之后呢对应的元素的显示状态也是会同步更新的

<body>
        <div id="app">
            <input type="button" value="切换显示" @click="changeIsShow" />
            <p v-show="isShow">不装了，我摊牌了，没错你要找的就是我</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var  app = new Vue({
                el:"#app",
                data:{
                    isShow:false
                },
                methods:{
                    changeIsShow(){
                        this.isShow = !this.isShow
                    }
                    
                }
            })
        </script>
    </body>

v-if:

v-if指令的作用：根据表达式的真假切换元素的显示状态
v-if = "表达式"
本质是通过操纵dom元素来进行切换显示
表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除


<body>
        <div id="app">
            <input type="button" value="点我切换显示" @click="changeIsShow" />
            <p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var  app = new Vue({
                el:"#app",
                data:{
                    isShow:false
                },
                methods:{
                    changeIsShow(){
                        this.isShow = !this.isShow
                    }
                }
            })
        </script>
    </body>

1.原理

v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示

2.应用场景

v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好

7.2 循环结构

image.png

为什么需要独一无二的key的简单示例:

<body>
    <div id="app">
      <div>
        <input type="text" v-model="name" />
        <button @click="add">添加</button>
      </div>
      <ul>
        <li v-for="(item, i) in list">
          <input type="checkbox" /> {{item.name}}
        </li>
      </ul>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script>
      // 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {
          name: "",
          newId: 3,
          list: [
            { id: 1, name: "李斯" },
            { id: 2, name: "吕不韦" },
            { id: 3, name: "嬴政" },
          ],
        },
        methods: {
          add() {
            //注意这里是unshift
            this.list.unshift({ id: ++this.newId, name: this.name });
            this.name = "";
          },
        },
      });
    </script>
  </body>

效果: