一起学Vue之入门篇

最新推荐文章于 2024-05-06 13:01:00 发布

老码识途呀

最新推荐文章于 2024-05-06 13:01:00 发布

阅读量692

点赞数

分类专栏：一起学Vue 文章标签： vue 前端 javascript

本文版权归作者和CSDN共有，写文不易，支持原创，欢迎转载【点赞】，转载请保留此段声明，且在文章页面明显位置给出原文连接，谢谢。

本文链接：https://blog.csdn.net/fengershishe/article/details/119713395

版权

一起学Vue 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue的特点

易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效：a. 20kB min+gzip 运行大小 b. 超快虚拟 DOM c. 最省心的优化

Vue的引用

想要在程序中引用，可以采用如下方式：

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

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，如下所示：

以文件插值的方式绑定文本内容。写法如下：{{message}}。

el 表示Vue绑定的容器ID，data表示数据变量。

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <title>一起学Vue</title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    message:'welcome to vue world!'                        
                }
            });
        </script>
    </body>
</html>

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

注意：script必须放置在div的后面，如果放置head中，会提示找不到元素app。

v-bind绑定元素属性

除了文本插值，我们还可以像这样来绑定元素特性：以v-bind，进行绑定title,格式如下：v-bind:title="message"

<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>

条件判断

v-if="sean"用于判断是否显示标签(通过DOM的新增或删除),
v-show="sean"用于判断是否显示标签(通过样式来实现，如：display: none;)

如下所示：sean表示data的一个变量，初始值为true

<p v-if="sean"> {{message}} </p>
<p v-show="sean">{{message}}</p>

列表循环

v-for 用于展示数组内容，通过改变元素的值，并不能触发页面发生变化，只有通过变异方法实现。

<ul>
    <li v-for="(todo ,index) in todos">{{todo.text}}---{{index}}</li>
</ul>

todos也是data的一个变量，如下所示：

data:{
    message:'welcome to vue world!',
    sean:true,
    todos:[{text:'学习java script'},{text:'学习html'},{text:'学习java'}],
    groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
    ]
}

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

绑定事件

v-on:click 用于绑定单击事件，如下所示：

<button v-on:click="handleClick" >点击一下</button>

其中handleClick是vue中的一个自定义事件，如下所示：

methods:{
    handleClick:function(){
        this.todos.push({text:'学习C#'});
    }
}

表单输入

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

如下所示：

<input type="text" v-model="message" />

自定义组件

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单，如下所示：

props表示变量列表，其中‘todo’为变量名称，在使用时v-bind:todo="item"关联起来即可。

Vue.component('todo-item1',{
    //todo-item1,现在接收一个prop的自定义属性，prop名为todo
    props:['todo'],
    template:'<li>{{todo.text}}---{{todo.id}}</li>'
});

使用时如下所示：

<ol>
    <todo-item1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item1>
</ol>

其中groceryList 是定义的一个对象数组。

学习手册

最好的学习就是官网的指导手册，本例中涉及的代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>一起学Vue</title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--
                作者：Alan.hsiang@qq.com
                时间：2019-11-18
                描述：以文件插值的方式绑定文本内容
            -->
            {{message}}
            <br />
            <!--
                作者：Alan.hsiang@qq.com
                时间：2019-11-18
                描述：以v-bind，进行绑定title,格式如下：v-bind:title="message"
            -->
            <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
            <br />
            <!--
                作者：Alan.hsiang@qq.com
                时间：2019-11-18
                描述：v-if="sean"用于判断是否显示标签(通过DOM的新增或删除),
                v-show="sean"用于判断是否显示标签(通过样式来实现，如：display: none;)
            -->
            <p v-if="sean"> {{message}} </p>
            <p v-show="sean">{{message}}</p>
            <br />
            <!--
                作者：Alan.hsiang@qq.com
                时间：2019-11-18
                描述：v-for 用于展示数组内容，通过改变元素的值，并不能触发页面发生变化，只有通过变异方法实现，
                如：push,pop,splice,
            -->
            <ul>
                <li v-for="(todo ,index) in todos">
                    {{todo.text}}---{{index}}
                </li>
            </ul>
            <!--
                作者：Alan.hsiang@qq.com
                时间：2019-11-18
                描述：v-on:click 用于绑定单击事件
            -->
            <button v-on:click="handleClick" >点击一下</button>
            <!--
                作者：Alan.hsiang@qq.com
                时间：2019-11-18
                描述：v-model 实现表单输入和应用状态之间的双向绑定
            -->
            <input type="text" v-model="message" />
            <br />
            <ul>
                <to-item></to-item>
            </ul>
            <ol>
                <todo-item1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">

                </todo-item1>
            </ol>
        </div>
        <!--
            作者：Alan.hsiang@qq.com
            时间：2019-11-18
            描述：script必须放置在div的后面，如果放置head中，会提示找不到元素app
        -->
        <script type="text/javascript">
            //声明一个简单的组件
            Vue.component('to-item',{
                template:'<li>这是待办项</li>'
            });
            Vue.component('todo-item1',{
                //todo-item1,现在接收一个prop的自定义属性，prop名为todo
                props:['todo'],
                template:'<li>{{todo.text}}---{{todo.id}}</li>'
            })
            var app=new Vue({
                el:"#app",
                data:{
                    message:'welcome to vue world!',
                    sean:true,
                    todos:[{text:'学习java script'},{text:'学习html'},{text:'学习java'}],
                    groceryList: [
                        { id: 0, text: '蔬菜' },
                        { id: 1, text: '奶酪' },
                        { id: 2, text: '随便其它什么人吃的东西' }
                    ]
                },
                methods:{
                    handleClick:function(){
                        this.todos.push({text:'学习C#'});
                    }
                }

            });

        </script>
    </body>
</html>

备注

一首清新小诗，点散午后的烦忧。

山居秋暝
作者：王维 (唐)

空山新雨后，天气晚来秋。
明月松间照，清泉石上流。
竹喧归浣女，莲动下渔舟。
随意春芳歇，王孙自可留。

老码识途呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
一起学Vue之入门篇

概述Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue的特点易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。高效：a. 20kB min+gzip 运行大小 b.超快虚拟 DOM c.最省心的优化Vu...
复制链接

扫一扫