方君の小窝
方君
2020-08-24

vue基础

# 一、vue基础

  • 前端进化历史
  • 1,原生JS=》2,JQUERY,lodash等代码库=》3,前端模板引擎ejs等=》4,三大框架（angular,react,vue）以及express等

库（插件）：

  • 提供一个或几个小功能，对项目侵入性较小，如果一个库无法满足可以轻松切换或叠加其他库实现
  • 例如：jquery提供DOM元素操作，事件及AJAX的封装($.ajax()..)，lodash封装了很多数组，对象的方法方便实用（_.debounce()防抖函数..）

框架：

  • 框架是一套完整的解决方案，对项目侵入性比较大，如项目需要更换框架，就要重新架构整个项目

  • vue小例子：./addData.html

总结：框架的诞生帮助我们不再操作DOM元素，用更多的时间关注业务逻辑

# 二、MVC与MVVM的区别

  • MVC 是后端的分层开发概念；
  • MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
  • vue代码和MVVM的对应关系

code : MVVM.html

# 三、VUE基础操作

# 1.插值

  • code: ./1simple.html

# 1. 文本（Mustache） !!!无法解析dom（标签结构）

<div id="app">
	<h1>{{message}}</h1>
    <h1 v-text="message"></h1>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        message："hello"
    }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# 2. v-html

<div id="app">
	<div v-html="message"></div>
</div>

<script>
var vm=new Vue({
    el:"#app",
    data:{
        message："<h1>hello</h1>"
    }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# 3. 标签属性不可用mustache语法，用v-bind把属性托管给vue

<div id="app">
	<div v-bind:style="style">123</div>
    <!-- 缩写 -->
    <div :style="style">456</div>
</div>

<script>
var vm=new Vue({
    el:"#app",
    data:{
        style:"background-color:red"
    }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 注意:在使用{{}}时,页面加载会出现闪烁.需要使用v-cloak解决
<style>
    [v-cloak]{
        display:none
    }
</style>

<div v-cloak>{{cloak}}</div>
1
2
3
4
5
6
7

# 2.if/else

  • code: ./2.ifelse&for.html

# 1. if/else

<h1 v-if="show"> show </h1>

<h1 v-if="show2"> show2</h1>
<h1 v-else> hide </h1>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else>
  Not A/B
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

# 2. v-show

<h1 v-show="block">aaaaa</h1>
1
  • 与v-if不同的是,v-show内元素始终被渲染在DOM中,切换元素的CSS属性display来展示与隐藏

# 3. v-if与v-show对比

  • v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

  • v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

  • 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

  • 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

# 3.for/key

  • code: ./2.ifelse&for.html

# 1.数组

<ul>
    <li v-for="(item,i) in list">索引: {{i}} 姓名: {{item.name}}</li>
</ul>
1
2
3

# 2.对象

<ul>
    <li v-for="(val,key,i) in obj">{{i}}--{{key}}:{{val}}</li>
</ul>
1
2
3

# 3.数字

<ul>
    <li v-for="i in 10">{{i}}</li>
</ul>
1
2
3

# 4.key

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

<ul>
    <li v-for="(item,i) in list" :key="i">索引: {{i}} 姓名: {{item.name}}	 </li>
</ul>
1
2
3

# 5.filter(6看完回来看这个)

<input type="text" v-model="searchname">
<ul>
    <li v-for="item in search(searchname)">{{item.name}} </li>
</ul>
   <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [{ name: "hengheng" }, { name: "haha" }, { name: "giao" }],
                searchname: ""
            },
            methods: {
                search(searchname) {
                    return this.list.filter((x) => {
                        return x.name.indexOf(searchname) != -1;
                    })
                }
            }
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 4.样式

  • code: ./3.style.html

# 1.class样式

<!-- 1数组 -->
<h1 :class="['red','bblue']">h1</h1>
<!-- 2三元 -->
<h1 :class="['red','bblue','ture'?'radius':'']">h1</h1>
<!-- 3对象 -->
<h1 :class="['red','bblue',{'radius':'true'}]">h1</h1>
1
2
3
4
5
6

# 2.内联样式

<!-- 1直写 -->
<h1 :style="{color:'red',background:'blue'}">h1</h1>
<!-- 2引用 -->
<h1 :style="style">h1</h1>
<script>
    var vm=new Vue({
        data:{
            style:{color:'red',background:'blue'}
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11

# 5.双向数据绑定v-model&watch监听

  • code:./4.v-model.html
<!-- 1.文本框 -->
<div id="app">
    <input type="text" v-model="n1">
    单价:{{n1}}
    <input type="text" v-model="n2">
    *个数:{{n2}}
    
    =价:{{result}}
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        n1:"",n2:"",result:""
    },
    watch:{
        n1(){  //data改变时自动触发
            this.result=this.n1*this.n2;
        },
        n2(){
            this.result=this.n1*this.n2;
        }
    }
})
</script>

<!-- 2.单选框&复选框 -->
<div id="app">
    <input type="radio" v-model="radio" value="a">
    <input type="radio" v-model="radio" value="b">{{radio}}
    
    <input v-model.lazy="checkbox" type="checkbox" value="a">
    <input v-model.lazy="checkbox" type="checkbox" value="b">
    <input v-model="checkbox" type="checkbox" value="c">{{checkbox}}
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        radio:"a",checkbox:[]
    }
})
</script>

<!-- 3.select -->
<select v-model="select" name="" id="">
      <option value="1">1</option>
      <option value="2">2</option>
</select>
{{select}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# 6.event

  • code:./5.event.html
<!-- 跑马灯 -->
<div id="app"> 
    {{text}}
    <button v-on:click="go">go</button>
    <!-- 简写 -->
    <button @click="stop">stop</button>
</div>


<script>
var vm=new Vue({
    el:"#app",
    data:{
        text:"helloVue.js",
        interval:null
    },
    methods:{
        go(){
            if(this.interval!=null)return;
            this.interval=setInterval(()=>{
                this.text=this.text.substring(1)+this.text.substring(0,1);
            },100)
        },
        stop(){
            clearInterval(this.interval);
            this.interval=null;
        }
    }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 1.事件修饰符：

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
  • .once 事件只触发一次
        <div @click="aa('父')">
            父
            <div @click="aa('子')">子</div>   <!-- 子父都触发 -->
        </div>

        <div @click="aa('父')">
            父
            <div @click.stop="aa('子')">子</div>
        </div>

        <div @click.self="aa('父')">
            父
            <div @click="aa('子')">子</div>
        </div>

        <a href="#">a</a>
        <a href="#" @click.prevent>a</a>
<script>
methods:{
      aa(n){
        console.log(n);
      }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
编辑
#基础
sass
vue自定义指令&生命周期

← vue自定义指令&生命周期 →

最近更新
01
vue自定义指令&生命周期
 08-24
02
ajax
 08-24
03
promise
 08-24
更多文章>
Theme by Vdoing | Copyright © 2019-2020