初识vue

vue模板语法2类

数据绑定

data与el的两种写法

MVVM模型

事件对象

键盘事件

事件的基本使用

姓名案例

天气案例

监视属性

深度监视

watch对比computer

绑定class样式

绑定style样式

条件渲染

列表渲染

key的作用与原理

列表过滤

列表排序

初识vue

1.想让vue工作，必须创建一个vue实例，且要传入一个配置对象；

2.root容器里的代码依然符号html规范，只不过混入一个特殊的vue语法

3.root容器里的代码被称为【vue模板】

4.真实开发中只有一个vue实例，并且会配合组件一起使用；

5.vue实例和容器是一一对应的

6.{{xxx}}中的xxx要写js的表达式，且xxx可以自动读取到data中的所有属性；

7.一旦data中的数据发生改变，那么页面中用到的数据地方会自动更新

注意区分js表达式和js代码（语句）

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

（1）a

（2）a+b

（3）demo（1）

（4）x===y？‘a’：‘b’

2.js代码/js语句

（1）if（）{}

（2）for（）{}

<!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>初始vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello,{{name}}，{{address}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        //创建vue实例
        new Vue({
            el: '#root',//el用于指定当前vue实例为哪个容器服务，植通常为css选择器字符串。
            data: {//data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name: '尚硅谷123',
                address: '深圳'
            }
        })
    </script>
</body>
</html>

vue模板语法2类

1.插值语法：

功能：用于解析标签体的内容

写法{{xxx}}，xxx是js的表达式，且可以直接读取到data中的所有属性

2.指令语法

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件。。。）

举例：v-bind：herf=“xxx”或简写为：herf=“xxx”，xxx同样为js的表达式且可以直接读取到data中的所有属性。

备注：vue有很多指令，且都有v-…的形式

<!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>vue模板</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr />
        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习2</a>
        <a :href="school.url" x="hello">点我去{{school.name}}学习1</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                name: 'jack',
                school: {
                    name: '尚硅谷',
                    url: 'http://www.atguigu.com',
                }
            }
        })
    </script>
</body>
</html>

数据绑定

1，单项数据绑定 v-bind

数据只能从data里面流向页面

2，双向数据绑定 v-model

数据不仅能从data流向页面，还可以从页面流向data

备注：：

1，双向绑定一般都引用在表单类元素上（如：input，select等）

2，v-model：value可以简写为v-model，因为v-model默认收集的就是value的值


<!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 type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        单项数据绑定：<input type="text" :value="name"><br />
        双项数据绑定：<input type="text" v-model:value="name"><br />
       
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        
new Vue({
            el: '#root',
        

    data: {
                name: '尚硅谷'
            }
        })
    </script>
</body>
</html>

data与el的两种写法

1，el的两种写法

（1）new Vue时候配置el属性。

（2）先创建Vue实例，随后再通过vm.$mount（‘#root’）指定el的值。

2，data有两种写法

（1）对象式

（2）函数式

如何选择：组件时必须使用函数式

3.重要原则

由vue管理的函数，一定不能写箭头函数，一旦写了箭头函数，this就不是vue实例了

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
<h1>你好，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
//el的两种写法
const v = new Vue({
    el:'#root',//第一种
    data:{
        name:'shangguigu'
    }
})
console.log(v)
v.$mount('#root')//第二种
    </script>
</body>

MVVM模型

1，M：模型model，data中的数据

2，V：视图view，模板代码

3，VM：视图模型viewmodel，vue实例

观察发现

1，data上的说有属性，最后都出现在vm上

2，vm身上的所有属性，以及vue原型上的

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <h1>测试一下：{{_c}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data: {
                name: '尚硅谷',
                address: 'beijing',
                a: 1
            }
        })
        console.log(vm);
    </script>

说有属性，在vue模板中都可以直接使用

数据代理

1，vue中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）

2，基本原理

通过object。defineProperty()把对象中所有属性添加到vm上

为每一个添加到vm上的属性，都指定一个getter/setter

在getter/setter内部去操作（读/写）data中对应的属性

事件对象

<body>
    <div id="root">
        <h2>欢迎来到{{name}}</h2>
        <button v-on:click="showInfo1">点击提示信息</button>
        <button v-on:click="showInfo2($event,66)">点击提示信息22</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'atguigu',
        },
        methods: {
            showInfo1(event) {
                alert('同学你好')
            },
            showInfo2(event, number) {
                alert('你好同学')
                console.log(event, number);
            }
        }
    })
</script>

事件修饰符

1，prevent阻止默认事件

2,stop阻止事件冒泡

3,once事件只触发一次

4,capture使用事件的捕获模式

5,self只有event.target是当前操作的元素是才触发事件

6,passive事件的默认行为立即执行，无需等待事件回调执行完毕