[TOC]

(一) hello world

  1. el 实例挂载元素节点
  2. data 可以在模板上展示的数据
  3. {{}} 插值表达式, 用来展示data里的数据
  4. v-text和v-html指令可以展示文本和标签 ```javascript // demo1.html <!DOCTYPE html>

    {{msg}}

<script>
    new Vue({
        // vue实例挂载的节点
        el: '#app',
        data: {
            msg: 'hello world',
            str: '<button>这是个按钮</button>'
        }
    });
</script>



<a name="79I46"></a>
## (二) 双向绑定
使用v-model指令对数据进行双向数据绑定<br />**指令:** 我们给计算机的命令

1. 修改了data里的username的值, 页面的username会跟着变化
1. 在页面上修改username的值, data里的username也会跟着变化
```javascript
// demo2.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>

<body>

    <div id="app">
        <input type="text" placeholder="请输入用户名" v-model="username">
    </div>

    <script>
        var obj = new Vue({
            el: '#app',
            data: {
                username: '张无忌'
            }
        })
    </script>
</body>

</html>

(三) 修改css样式

绑定样式:

  • v-bind:calss
  • 简写 :class ```javascript // demo3.1.html <!DOCTYPE html>
  • xxxx
  • xxxx
  • xxxx

// demo3.2.html 使用三目运算符添加类 <!DOCTYPE html>

ppppppppppppppppppp

<a name="j0yCj"></a> ## (四) 修改样式javascript // demo4.html <!DOCTYPE html>

ppppppppppp


<a name="qSSa5"></a>
## (五) 绑定事件

1. 绑定事件(不传参)
   1. v-on:事件类型
   1. 简写: @事件类型
```javascript
// demo5.1.html
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>

<div id="app">
    <button v-on:click="say">点我</button>
    <!-- 简写@ -->
    <button @click="say()">点我</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {},
        // 方法必须写在methods
        methods: {
            say() {
                alert(2222);
            }
        }
    });
</script>
  1. 绑定事件(传参) ```javascript
``` 3. 绑定事件[(事件修饰符)](https://cn.vuejs.org/v2/guide/events.html) 1. 阻止事件冒泡event.stopPropagation() 1. 阻止默认事件event.preventDefault() ```javascript // demo5.3.1.html // demo5.3.2.html // .stop 阻止冒泡 //.prevent 阻止默认事件 // .once 只触发一次


点我
``` ## (六) 生命周期(函数,钩子函数) beforeCreate ----》实例创建之前
created ----》实例创建之后
beforeMount ----》实例挂载之前
mounted ----》实例挂载之后
beforeUpdate ----》实例更新之前
updeted ----》实例更新之后
beforeDestroy ----》实例销毁之前
destroyed ----》实例销毁之后 ```javascript
``` ## (七) 条件渲染 v-if和v-show的区别 1. 使用v-if, 取值为false时, 元素会被删除 1. 使用v-show, 取值为false时, 元素不会被删除, 只是被隐藏 ```javascript // demo7.1.html v-if

  • xxxxx
  • xxxxx
  • xxxxx
  • xxxxx
  • xxxxx
// 上面例子简写
  • xxxxx
  • xxxxx
  • xxxxx
  • xxxxx
  • xxxxx
// demo7.2.html v-show
  • xxxxx
  • xxxxx
  • xxxxx
  • xxxxx
<a name="VWbEc"></a> ## (八) 渲染列表 1. v-for指令渲染列表 1. :key="index" 添加key可以优化渲染效率(速度)javascript // demo8 <!DOCTYPE html>
  • 第2节 vue基础知识 - 图1 {{item.name}} 

<a name="4iNXV"></a>
## (九) couputed 计算属性
根据一个已知的属性得到一个新的属性
```javascript
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="str"> => <span>{{capital}}</span>
    </div>

    <script>
        var obj = new Vue({
            el: '#app',
            data: {
                str: ''
            },
            // 计算属性
            computed: {
                // 新的属性
                capital() {
                    return this.str.toUpperCase();
                }
            }
        })
    </script>
</body>

</html>

(十) watch 侦听器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{username}}</p>
        <button @click="username='张欢'">修改名字</button>
    </div>

    <script>
        var obj = new Vue({
            el: '#app',
            data: {
                username: '张三丰'
            },

            watch: {
                // 监听username的变化
                username(newVal, oldVal) {
                    console.log('新值', newVal);
                    console.log('旧值', oldVal);
                }
            }

        })
    </script>
</body>

</html>

// 总结：同一个功能 computed 和 watch 都能实现，能用 computed 的时候一般都用 computed，更简洁

(十一) refs 获取原生dom节点或者子组件实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>

<body>
    <div id="app">
        <div ref="aa">divdivdivdivdivdivdivdiv</div>
        <p ref="bb">pppppppppppppppppppppppppp</p>
    </div>

    <script>
        var obj = new Vue({
            el: '#app',
            data: {},
            created() {
                console.log(this.$refs);
            },
            mounted() {
                console.log(this.$refs);
                console.log(this.$refs['aa']);
                console.log(this.$refs['bb']);
            }

        })
    </script>
</body>

</html>

使用axios请求数据

 axios.get(url).then(res=> {
   if (res.code == 666) {
     console.log(res);
   } else {
     console.log(res.msg);
   }
 }).catch(err=> {
   console.log(err);
 })

作业1: 使用vue完成首页和影院列表页
附加作业: 使用vue重构英雄小项目