文本传值 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello yangtuo"
        }
    })
</script>
</html>

展示示例

Vue 基础语法相关特性
Vue 官方文档
文本传值 demo
元素传值 demo
条件循环 demo
列表循环 demo
事件处理 demo
异步通信 demo
表单输入绑定 demo
组件使用 demo
计算属性 demo
插槽 demo
自定义事件 demo

简单解析

id 作为 el 的绑定标识, 从而让 vue 对标签进行识别,

让 data 里面的数据可以在对应的标签里面的模板展示出来

data 里面的数据属性可以直接进行使用

此处的绑定为双向绑定, 在控制台进行修改后页面上也会实时更新

元素传值 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="message">
    让我看看悬浮
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "看吧看吧"
        }
    })
</script>
</html>

展示示例

悬浮没法截图, 意思就是这样

简单解析

v-bind 可以在标签元素的属性中进行传递, 同样是双向绑定

条件循环 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="message">我出来了</p>
    <p v-else>我不见了</p>


    <p v-if="mess === 'A'">A</p>
    <p v-else-if="mess === 'B'">B</p>
    <p v-else>Other</p>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: true,
            mess: "A"
        }
    })
</script>
</html>

展示示例

简单解析

v-if / v-elseif / v-else 类似 python 中的 if / eilf / else

列表循环 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            items: [
                {message: "爬啊爬"},
                {message: "滚啊滚"},
                {message: "游啊游"}
            ]
        }
    })
</script>
</html>

展示示例

简单解析

v-for 循环控制 x in xs , xs 为 vue 的绑定值, x 为形参

同样具备双向绑定影响

事件处理 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="greet">点我</button>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        // 在 methods 中定义方法
        data:{
          message: "yang"
        },
        methods: {
            // 通过 this 可以拿到 data 里面的值
            greet: function () {
                alert("hello yangtuo " + this.message)
            }
        }
    })


</script>
</html>

展示示例

简单解析

v-on 进行绑定事件处理, 事件处理的函数需要在 methods 对象里面进行定义方法

methods 里面拿 data 里面的值得时候通过 this 即可拿到

异步通信 demo

相同路径下准备一个文件 data.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "url": "www.test.com"
}

demo 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <p>名字: {{info.name}} </p>
    <p>url: {{info.url}} </p>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {info: {name: "", url: ""}}
        },
        mounted() {
            axios.get('data.json').then(response => this.info = response.data)
        }
    })


</script>
</html>

展示示例

简单解析

vue 中采用 Axios 进行异步通信, 同时在 vue 的生命周期中

存在一个 mounted 的钩子函数可以进行重写从而便于进行一系列操作

axios 拿到的数据放入提前在 data 里面声明的变量里面

从而再从标签中使用

表单输入绑定 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="message" value="不生效的初始值"> // value 会无法显示
    <p>输入: {{message}}</p>
</div>

</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "初始值的说"
        }
    })
</script>
</html>

展示示例

输入框中输入什么, 下面的 p 标签就展示什么进行同步更新

简单解析

v-model 作为 vue 的语法糖对输入表单进行双向绑定, 从而实现实时联动展示数据

但是注意:

　　1. v-model 会让标签内本身定义的 value , checked , selected 等默认值属性失效

　　2. v-model 对下拉框的展示在 ios 中会有 bug 导致第一个选择会无法被选择

　　　　2.1 处理方法: 在下拉框中的第一个位置展示一个值为空的禁用选项, 比如置灰的 "请选择"

组件使用 demo

此 demo 为 js 的形式来实现组件, 开发中并不会使用此种方式

目前仅作为便于理解进行简单展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <ul>
        <my-component-li></my-component-li>
    </ul>
</div>
</body>
<script>
    Vue.component("my-component-li", {
        template:"<li>hello cibo</li>>"
    })
    var app = new Vue({
        el: "#app"
    })
</script>
</html>

展示示例

简单解析

组件可以理解为 vue 中可以重复使用的一组模板

可以通过 Vue.component 进行定义 ("名字", { template: "内容" })

然后名字的标签使用的地方就可以进行复用, 通常不会使用此方法

而且 li 一般用于循环, 这里改动一下代码

这里红色的 items 是通过 v-for 直接在 data 里面就可以拿到的

绿色的 item 是在组件里面 props 里面定义拿到的

红色和绿色彼此是互不干涉的, 因此需要 v-bind 进行绑定 (蓝色部分)

v-bind 前面穿的值是当前组件的一个属性, 这个属性在组件的 porps中进行了定义

v-bind 后面穿得值是属性的赋值, 这里用了 v-for 循环的形参

结果展示

计算属性 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <p>当前时间方法: {{getCurrentTime()}}</p>
    <p>当前时间属性: {{getCurrentTime1}}</p>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        methods: {
            getCurrentTime: function () {
                return Date.now();
            }
        },
        computed: {
            getCurrentTime1: function () {
                return Date.now();
            }
        }
    })
</script>
</html>

展示示例

可以看到计算属性出来的数据是不会发生变化的

而方法计算的数据是每次使用都重新计算的

简单解析

通过 computed 进行定义, 然后计算函数放入, 将计算函数的结果缓存

避免下次使用此值得时候再次进行计算, 从而避免了额外的开销

本质上是将一个动态的运行结果转化为一个静态的属性

插槽 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title='title'></todo-title>
        <todo-context slot="todo-context" v-for='context in contexts' v-bind:context='context'></todo-context>
    </todo>
</div>
</body>
<script>
    Vue.component("todo", {
        template: "<div>" +
            "<slot name='todo-title'></slot>" +
            "<ul>" +
            "<slot name='todo-context'></slot>" +
            "</ul>" +
            "</div>"
    })
    Vue.component("todo-title", {
        props: ["title"],
        template: "<div>{{title}}</div>"
    })
    Vue.component("todo-context", {
        props: ["context"],
        template: "<li>{{context}}</li>"
    })

    var app = new Vue({
        el: "#app",
        data: {
            title: "标题",
            contexts: ["a", "b", "c"]
        }
    })
</script>
</html>

展示示例

简单解析

插槽是作为组件放入的位置进行定义的

大组件里面经常会放入小组件, 小组件在大组件的摆放的预留位置则是插槽

本次示例中大组件 todo 里面有两个小组件 todo-title 和 todo-context

使用 solt 在大组价中预留位置

组件的传值依旧是定义 props 里面属性, 然后使用的地方 bind 绑定外部的数据进行映射

自定义事件 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title='title'></todo-title>
        <todo-context
                slot="todo-context"
                v-for='(context, index) in contexts'
                :context='context' // v-bind: 的简写
                :index='index'
                v-on:remove="removeContexts"></todo-context>
    </todo>
</div>
</body>
<script>
    Vue.component("todo", {
        template: "<div>" +
            "<slot name='todo-title'></slot>" +
            "<ul>" +
            "<slot name='todo-context'></slot>" +
            "</ul>" +
            "</div>"
    })
    Vue.component("todo-title", {
        props: ["title"],
        template: "<div>{{title}}</div>"
    })
    Vue.component("todo-context", {
        props: ["context", "index"],
        template: "<li>{{index}} --> {{context}} <button v-on:click='remove'>删除</button></li>",
        methods: {
            remove: function () {
                this.$emit("remove");
            }
        }
    })

    var app = new Vue({
        el: "#app",
        data: {
            title: "标题",
            contexts: ["a", "b", "c"]
        },
        methods: {
            removeContexts: function (index) {
                this.contexts.splice(index, 1);
                alert(123)
            }
        }
    })
</script>
</html>

展示示例

点击删除按钮后会将此行删除掉

简单解析

基于上一个示例, 在每行后面加一个删除按钮, 点击后删除本行

首先确认三个事实:

　　1. 每一行都是根据数据for出来的, 因为数据绑定, 删数据即可实现删行

　　1. 组件定义的地方里面是没有数据的, 数据是组件被渲染的时候外部穿进去展示的

　　2. 标签里面是没法调用到组件内的方法的, 标签本质是最外部最终展示的结果

基于这两个因素

　　1. 组件里面直接删除数据不可行

　　2. 组件里面定义删除方法, 外面调不到也不行

但是

　　1. 数据是在外面 data 里面定义的. 因此在外面就可以删掉

　　2. 通过组件内自定义方法 $emit("方法名") 指定后即可在标签内调用外部的方法

　　　　2.1 v-on:remve(自定义方法名):removeContext(外部方法名)

　　　　2.2 因为这里的 v-on 和 v-for 和组件都是基于 Vue 内部, 可以省略参数的传递

最终的流程图

外部定义删除方法删除数据, 组件自定义方法, 标签内通过 v-on 将两方法链接

参数的传递标签内和组件内可以省略, 参数要和外部绑定起来让外部的函数能拿到

但是外部的方法必须该有的不能少 (毕竟这里是真正的计算逻辑少了参数怎么行)

Vue 基础语法相关特性 Vue 官方文档 文本传值 demo 元素传值 demo 条件循环 demo 列表循环 demo 事件处理 demo 异步通信 demo 表单输入绑定 demo 组件使用 demo 计算属性 demo 插槽 demo 自定义事件 demo

文本传值 demo

展示示例

简单解析

元素传值 demo

展示示例

简单解析

条件循环 demo

展示示例

简单解析

列表循环 demo

展示示例

简单解析

事件处理 demo

展示示例

简单解析

异步通信 demo

展示示例

简单解析

表单输入绑定 demo

展示示例

简单解析

组件使用 demo

展示示例

简单解析

计算属性 demo

展示示例

简单解析

插槽 demo

展示示例

简单解析

自定义事件 demo

展示示例

简单解析

相关推荐

Vue 基础语法相关特性 Vue 官方文档文本传值 demo 元素传值 demo 条件循环 demo 列表循环 demo 事件处理 demo 异步通信 demo 表单输入绑定 demo 组件使用 demo 计算属性 demo 插槽 demo 自定义事件 demo