什么是vue

  1. 构建用户界面
  • 用vue往html里填充数据
  1. 框架
  • 框架是一套现成的解决方案，只能遵守框架规范写自己的业务功能

vue的特性

  1. 数据驱动视图

数据的变化会驱动视图自动更新

  1. 双向数据绑定

在网页中，form表单负责采集数据，Ajax负责提交数据

  • js数据的变化，会被自动渲染到页面上
  • 页面上表单采集的数据发生变化时，会被vue自动获取到，更新到js数据中

数据驱动视图和双向数据绑定的底层原理是MVVM（Mode数据源、View视图、ViewModel就是vue实例

vue的基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <!-- 希望vue控制div，把数据填充到div内部 -->
    <div id="app">{{ username }}</div>
    <!-- 1.导入Vue库文件，在window全局就有了vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 2.创建Vue的实例对象 -->
    <script>
        const vm = new Vue({
            //el属性是固定写法，表示当前vm实例要控制页面上的那个区域，接受的值是一个选择器
            el: '#app',
            //date对象就是要渲染到页面的数据
            data: {
                username: '胖虎'
            }
        })
    </script>
</body>

vue指令

1.内容渲染指令

1
2
3
4
5
v-text：会覆盖元素内部原有指令，只能渲染纯文本内容

{{}} :插值表达式,内容占位符，不会覆盖原有内容，只能渲染纯文本内容，不能用在元素的属性节点

v-html:把带标签的指令渲染成html内容

2.属性绑定指令

v-bind: 可简写为:为元素属性动态绑定值

  • 在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，如：
1
2
3
<div :title="'box' + index">
    这是一个div
</div>
  • 在 {{}}插值表达式和v-bind指令中可以使用js语法

3.事件绑定指令

v-on:可简写为@，为元素绑定事件

1
2
3
4
5
6
7
<button @click='add'>+1</button>

methods: {
    
    add(){
        this.count+=1;
    }

如果默认对象事件e被覆盖，可以手动传递$event

1
2
3
4
5
6
7
<button @click='add(1,$event)'>+1</button>

methods: {
    
    add(n,e){
        this.count+=1;
    }
事件修饰符

在事件处理函数中调用event.preventDefault()和event.stopPropagation()很常见，为了更方便对事件触发进行控制，vue提供了事件修饰符概念。

.prevent：组织默认行为（链接跳转、表单提交）

.stop：阻止事件冒泡

1
2
3
4
5
6
7
<a href="http:www.baidu.com" @click.prevent="btn">百度一下</a>

methods: {
    btn(){
        console.log("hhh");
    }
}

4.双向绑定指令

v-model ：input输入框、textarea、select，v-model 会根据控件类型自动选取正确的方法来更新元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: '胖虎',
  }
})
</script>
v-model指令修饰符

.number：自动将用户的输入值转为数值类型

.trim：自动过滤用户输入的首尾空白字符

5.条件渲染指令

v-if：每次动态创建或移除元素，实现元素的显示和隐藏

v-show：动态为元素添加或移除display:none样式，来实现元素的显示和隐藏

6.列表渲染指令

v-for：用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in list 形式的特殊语法

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
<div id="app">
    <table class="table table-bordered table-hover table-striped">
        <thead>
            <th>索引</th>
            <th>ID</th>
            <th>姓名</th>
        </thead>
        <tbody>
            <tr v-for="(item,index) in list" :key="item.id">
                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </tbody>
    </table>
</div>


data: {
    list:[
        {id:1, name:'胖虎'},
        {id:2 ,name:'大熊'},
        {id:3 ,name:'小夫'}
    ]
},

image-20211106202427814