1.1 初始vue

最新推荐文章于 2022-09-25 22:34:33 发布

痴心的萝卜

最新推荐文章于 2022-09-25 22:34:33 发布

阅读量240

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_36826618/article/details/104165195

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

什么是Vue

Vue(读音类似view)是一个构建数据驱动的web界面的渐进式框架,它是用来快速构建前端应用的

Vue简史

2013年7月28日
作者尤雨溪( Evan you)
首次提交代码到 github
名为 Element随后更改为 Seed. js
2014年2月1日
新版本0.6.0正式改名为 Vue.js
2015年10月26日
Vue1.0.0发布
2016年10月1日
Vue2.0.0发布

Vue开发和传统开发的对比

Vue开发

数据驱动UI视图,只需管理数据；
使用 v-if 等指令完成DOM操作；
methods中定义点击事件,元素中绑定事件。
优点:视图数据解耦，指令化操作，利于维护

传统开发

定义变量判断DOM是否存在；
使用JQ 2次操作DOM；
给创建好的元素绑定事件
弊端:视图数据糅合,频繁操作DOM,难维护

Vue优势在于小、轻、快，数据与UI视图分离，易于维护等。

开始使用Vue

Vue的引入

直接引入
1.最新稳定版本 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
2.指定具体版本<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
具体版本 https://www.bootcdn.cn/vue/
大型项目npm安装
最新稳定版本 npm install vue
官网 https://www.npmjs.com/ 搜索vue即可
命令行工具CLI（脚手架）构建
1.安装 npm install -g @vue/cli或yarn global add @vue/cli
2.创建项目 vue create my-project或使用图形ui界面 vue ui

搭建第一个Vue应用

Vue.js应用的创建很简单,通过构造函数Vue就可以创建(new)一个vue的根实例，并启动vue应用。
demo（cdn方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
    <div id="app" class="myapp">
        <ul>
            <li v-for="item in feBooks">{{item.name}}</li>
        </ul>
        <hr>
        <h4>双向绑定</h4>
        <input type="text" v-model="title">
        <p>{{title}}</p>
    </div>
    <script>
    new Vue({
        el: '.myapp',
        data: {
            title: "hello world",
            feBooks: [
                {name: 'test1'},
                {name: 'test2'},
                {name: 'test3'},
                {name: 'test4'},
                {name: 'test5'}
            ]
        }
    })
    </script>
</body>
</html>

DOM结构(UI视图)
- v-for、v-model为Vue提供的指令，类似的还有v-if、v-bind等；
- {{}}双花括号是最基本的文本插值方法( Mustache语法)。
数据
- el 选项是指定应用的DOM位置；
- 在data对象中定义UI所需数据,例如 febooks、name等；
- 在input标签上，有一个 v-model的指令，它的值对应于我们创建的Vue实例的data选项中的title字段，这就是Vue的数据绑定。

痴心的萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
1.1 初始vue

什么是VueVue(读音类似view)是一个构建数据驱动的web界面的渐进式框架,它是用来快速构建前端应用的Vue简史2013年7月28日作者尤雨溪( Evan you)首次提交代码到 github名为 Element随后更改为 Seed. js2014年2月1日新版本0.6.0正式改名为 Vue.js2015年10月26日Vue1.0.0发布2016年10月1日Vue2...
复制链接

扫一扫