Vue知识概括

最新推荐文章于 2024-08-30 20:29:15 发布

SF_ONE

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量190

点赞数

分类专栏：前端文章标签： js vue.js vue

本文链接：https://blog.csdn.net/qq_55946115/article/details/119716672

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

认识Vue

Vue作者：尤雨溪
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
环境

 - <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

入门程序

<!--快速入门-->
    <h2 id="app">{{msg}}</h2>
    <script>
    //声明式渲染：数据和 DOM 已经被建立了关联，所有东西都是响应式的。
        let app = new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            }
        });
    </script>

指令

v-bind:
v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 href attribute 和 Vue 实例的 go property 保持一致”。

<!--  v-bind绑定元素的属性  -->
    <a id="app2" v-bind:href="go">百度</a>
    <script>
        let app2 = new Vue({
            el: "#app2",
            data: {
                go: 'https://www.baidu.com/'
            }
        });
    </script>

v-if v-else-if v-else

<!-- 选择操作v-if  v-else v-else-if -->
    <div id="app4">
        <p v-if="flag === 'A'">A</p>
        <p v-else-if="flag === 'B'">B</p>
        <p v-else>C</p>
    </div>
    <script>
        new Vue({
            el: "#app4",
            data: {
                flag: "A"
            }
            }
        );
    </script>

v-for

<!--循环与条件-->
    <div id="app3">
        <li v-for="(item,index) in items">{{index}}:{{item.msg}}</li>
    </div>
    <script>
        let app3 = new Vue({
            el: "#app3",
            data: {
                items: [
                    {msg: "A"},
                    {msg: "B"},
                    {msg: "C"},
                ]
            }
        });
    </script>

v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<!--事件绑定-->
    <div id="app5">
        <button v-on:click="app5()">点击</button>
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el: "#app5",
            data: {
                msg: 0,
            },
            methods: {
                app5: function () {
                    this.msg++;
                }
            }
        });
    </script>

v-model 表单数据双向绑定

<!--表单数据处理，双向绑定-->
    <form id="app6">
        name:<input type="text" v-model="name" placeholder="请输入姓名..."><span>{{name}}</span><br/>
        password:<input type="password" v-model="password"  placeholder="密码..."><span>{{password}}</span><br/>
        <textarea v-model="text"></textarea><span>{{text}}</span><br/>
        <input type="radio" value="男" v-model="disabled" checked="checked" >
        <input type="radio" value="女" v-model="disabled" ><span>{{disabled}}</span><br/>
        <input type="checkbox" v-model="choose" value="a">a
        <input type="checkbox" v-model="choose" value="b">b
        <input type="checkbox" v-model="choose" value="c">c<span>{{choose}}</span><br/>
        <select v-model="on">
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
        </select><span>{{on}}</span>
    </form>
    <script>
        new Vue({
            el: "#app6",
            data: {
                name: "",
                password: "",
                text: "",
                disabled: "男",
                choose: [],
                on: ''
            }
        });
    </script>

v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在这里插入图片描述

<!--组件-->
    <div id="app7">
        <zyx v-for="num in numbers" v-bind:value="num"></zyx>
    </div>
    <script>
    //自定义组件，添加名称，创建模板
        Vue.component('zyx',{
            props: ['value'],
            template: '<p>{{value}}</p>'
        });
        new Vue({
            el: "#app7",
            data:{
             numbers: [1,2,3,4,5],
            }
        });
    </script>

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

官网

下图展示了实例的生命周期
在这里插入图片描述

计算属性

<div id="app9">
        <p>{{test1()}}</p>
        <p>{{test2}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app9",
            data: {
                message: "zyx"
            },
            methods: {
                test1: function () {
                    return Date.now();
                }
            },
            computed: {
              test2: function () {
                  return Date.now();
              }
            }
        });
    </script>

将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

自定义事件内容分发

<!--slot插件-->
<div id="app10">
    <z>
        <zyx-title slot="zyx-title" v-bind:title="title"></zyx-title>
        <zyx-items slot="zyx-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="toRemove(index)" :key="index"></zyx-items>
    </z>
</div>
<script>
    Vue.component("z",{
        template: '<div><slot name="zyx-title"></slot><ul><slot name="zyx-items"></slot></ul></div>'
        //自定义组件和slot插槽
    });
    Vue.component("zyx-title",{
        props: ['title'],
        //props: []  可以进行值的传入
        template: '<div>{{title}}</div>'
    });
    Vue.component("zyx-items",{
        props: ['item'],
        template: '<li>{{item}}<button v-on:click="remove">删除</button></li>',
        methods: { //定义事件分发
            remove: function (index) {
                this.$emit('remove',index)
            }
        }
    });
    new Vue({
        el: "#app10",
        data: {
            title: '爱好',
            items: ['篮球','篮球*2','篮球*3']
        },
        methods: {
            toRemove: function (index) {
                this.items.splice(index,1);
            }
        }
    });
</script>

axios

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

<!--axios实现异步更新-->
    <div id="app8" >
        <p v-for="site in info.sites">{{site.name}}:{{site.info}}</p>
    </div>
    <script>
        new Vue({
            el: "#app8",
            data(){
                return {
                    info: {
                        name: null,
                        sites: [
                            {
                                name: null,info: null
                            }
                        ]
                    }
                }
            },
            mounted(){
                axios.get('data.json').then(response => (this.info=response.data)).catch(function (error) {
                    alert(error);
                });
            }
        });
    </script>

SF_ONE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue知识概括

认识VueVue作者：尤雨溪Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。环境 - <script src="https://cdn.jsdeli
复制链接

扫一扫

专栏目录