Vue笔记(1)

Vue简介

1. JavaScript框架
2. 简化DOM操作
3. 响应式数据驱动

第一个Vue程序

1. 导入开发版本的Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 创建Vue实例对象，设置el属性和data属性

3. 实用简洁的模板语法把数据渲染到页面上

<div id="app">{{message}}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            }
        })
    </script>

el:挂载点

• Vue实例的作用范围是什么呢?
• 是否可以使用其他的选择器？
• 是否可以设置其他的dom元素呢？

1. el命中的元素内部中的所有嵌套都可以获得相应的值
2. 类选择器和标签选择器都可以
3. dom中的所有组件都可以使用(但是不包含body标签)

data数据对象

1. Vue中用到的数据定义在data中
2. data中接一些复杂类型的数据
3. 渲染复杂类型数据时，遵循js的语法即可

<div id="app">{{message}}
     <h2>{{school.name}}---{{school.mobile}}</h2>
    <h2>{{campus[0]}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello",
            school:{
                name:"小明",
                mobile:"123456"
            },
            campus:["北京","上海","深圳","广州"]
        }
    })
</script>

本地应用指令

v-text

结果：

v-html

当data中的数据是HTML结构时，使用此标签可以识别出HTML语言。
例：

• v-html指令的作用是:设置元素的innerHTML
• 内容中有html结构会被解析为标签
• v-text指令无论内容是什么,只会解析为文本
• 解析文本使用v-text,需要解析html结构使用v-html

v-on

为元素绑定事件



再点击西蓝花炒蛋时页面上的内容就会不断叠加，实现内容的变换。

• v-on指令的作用是:为元素绑定事件
• 事件名不需要写on
• 指令可以简写为@
• 绑定的方法定义在methods属性中

本地应用-计数器

要求：

1. data中定义数据:比如num
2. methods中添加两个方法:比如add(递增),sub(递减
3. 使用v-text将num设置给span标签
4. 使用v-on将add,sub分别绑定给+,-按钮
5. 累加的逻辑:小于10累加,否则提示
6. 递减的逻辑:大于0递减,否则提示
   
   

• 创建Vue示例时:el(挂载点),data(数据),methods(方法)
• v-on指令的作用是绑定事件，简写为@
• 方法中通过this,关键字获取data中的数据
• v-text指令的作用是:设置元素的文本值,简写为{f}