学习vue笔记（1）

最新推荐文章于 2024-06-15 14:41:39 发布

Aliceblle

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量687

点赞数 3

分类专栏： vue学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/QQQQQQFJQ/article/details/122657511

版权

笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue学习

4 篇文章 0 订阅

订阅专栏

初识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中对应的属性

1，

<script type="text/javascript">

Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示

let number = 18

let person = {

name: '张三',

sex: '男',

}

Object.defineProperty(person, 'age', {

value: 18,

enumerable: true,

writable: true,

configurable: true,

get() {

console.log('有人读取了age属性了')

return number

},

set() {

console.log('有人修改了age属性，且值式', value);

number = value

}

})

</script>

2，



<script type="text/javascript">

Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示

let obj = { x: 100 }

let obj2 = { y: 200 }

Object.defineProperty(obj2, 'x', {

get() {

return obj.x

},

set(value) {

obj.x = value

}

})

</script>

3，

<body>

<div id="root">

<h2>学校名称:{{name}}</h2>

<h2>学校地址:{{address}}</h2>

</div>

<script type="text/javascript">

Vue.config.productionTip = false

const vm = new Vue({

el: '#root',

data: {

name: 'atguigu',

address: 'jkdjhg'

}

})

</script>

</body>

事件对象

<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事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

事件的基本使用

1，使用v-on:xxx或@xxx绑定事件，其中xxx是事件名

2，事件的回调需要配置再methods对象中，最终会再vm上

3，methods中配置的函数，不要用箭头函数！否则this就不是vm了

4，methods中配置的函数，都是vue所管理的函数，this的指向是vm或组件实例对象

5，@click=“demo“和@click=”demo（$event）“效果一样，但是后者可以传参

练习案例（1）：姓名案例

练习案例（2）：天气案例

监视属性watch

1，当被监视的属性变化时，回调函数自动调用

2，监视属性必须存在才能进行监视

3，监视的两种方法

（1）new Vue时传入watch配置

（2）通过vm.$watch监视

深度监视

watch监视属性对比computer计算属性

1，用watch写了姓名属性

computer写姓名属性

绑定class样式

1，写法：class=''xxx''xxx可以是字符串，对象，数组

字符串写法适用于：类名不确定，要动态获取

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定

数组写法适用于：要绑定多个样式，个数确定，名字要确定

绑定style样式

:style=''{fontSize:xxx}''其中xxx是动态值

:style=''[a,b]''其中a，b是样式对象

条件渲染

1，v-if写法

（1）v-if=“表达式”

（2）v-else-if=“表达式”

（3）v-else=“表达式”

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和v-else-if=，v-else=一起被使用，但结构不能被打断

2，v-show

写法：v-show=“表达式”

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式可以获取到

列表渲染

v-for指令

1，用于展示列表数据

2，语法：v-for=“(item,index)"in xxx":key="yyy"

3,可遍历：数组，对象，字符串（用的很少），指定次数（用的很少）

key的作用与原理

列表过滤

1，用watch实现

用用computer实现

列表排序

Aliceblle

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习vue笔记（1）

目录初识vuevue模板语法2类数据绑定data与el的两种写法MVVM模型事件对象键盘事件事件的基本使用姓名案例天气案例监视属性深度监视watch对比computer绑定class样式绑定style样式条件渲染列表渲染key的作用与原理列表过滤列表排序初识vue1.想让vue工作，必须创建一个vue实例，且要传入一个配置对象；2.root容器里的代码依然符号html规范，只不过混入一个特殊的vue语法3.roo
复制链接

扫一扫