Vue框架基础_vue基本框架

• JavaScript框架
• 简化Dom操作
• 响应式数据驱动（数据改变，页面同步更新）

官方文档：https://cn.vuejs.org

Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他选择器？

可以使用其他选择器，但是建议使用ID选择器

是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和BODY

1.创建Vue实例

el：挂载点

data：数据

methods：方法

方法中通过this，关键字获取data中的数据

• v-text

• v-html

• v-on

  v-on:click

  v-on:monseenter

  v-on:dblclick

  也可以使用@click

• v-show

• v-if

• v-bind

• v-for:列表结构可以通过v-for指令结合数据生成

• v-model(双向绑定)通过v-model可以快速的设置和获取表单元素的值

  v-on结合事件修饰符可以对时间进行限制，比如.enter

  v-on在绑定事件时可以传递自定义参数

axios:网络请求库（axios+vue）

2.组件化

我们通过Vue的component方法来定义一个全局组件。

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
• 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
• 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
• 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
• data必须是一个函数，不再是一个对象。

组件的data属性必须是函数！

局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const counter = {
    template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
    data(){
        return {
            count:0
        }
    }
};
1
2
3
4
5
6
7
8

然后在Vue中使用它：

var app = new Vue({
    el:"#app",
    components:{
        counter:counter // 将定义的对象注册为组件
    }
})
1
2
3
4
5
6

• components就是当前vue对象子组件集合。
  • 其key就是子组件名称
  • 其值就是组件对象名
• 效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

3.组件通信

父向子传递

1. 父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
2. 子组件通过props接收父组件数据，通过自定义属性的属性名

父组件使用子组件，并自定义了title属性：

<div id="app">
    <h1>打个招呼：</h1>
    <!--使用子组件，同时传递title属性-->
    <introduce title="大家好，我是锋哥"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("introduce",{
        // 直接使用props接收到的属性来渲染页面
        template:'<h1>{{title}}</h1>',
        props:['title'] // 通过props来接收一个父组件传递的属性
    })
    var app = new Vue({
        el:"#app"
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子向父传递

<div id="app">
    <h2>num: {{num}}</h2>
    <!--使用子组件的时候，传递num到子组件中-->
    <counter :num="num"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减
        template:'\
            <div>\
                <button @click="num++">加</button>  \
                <button @click="num--">减</button>  \
            </div>',
        props:['num']// count是从父组件获取的。
    })
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 子组件接收父组件的num属性
• 子组件定义点击按钮，点击后对num进行加或减操作

4.路由vue-router

使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。

使用npm安装：npm install vue-router --save

在index.html中引入依赖：

<script src="../node_modules/vue-router/dist/vue-router.js"></script>
1

新建vue-router对象，并且指定路由规则：

// 创建VueRouter对象
const router = new VueRouter({
    routes:[ // 编写路由规则
        {
            path:"/login", // 请求路径，以“/”开头
            component:loginForm // 组件名称
        },
        {
            path:"/register",
            component:registerForm
        }
    ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13

• 创建VueRouter对象，并指定路由参数
• routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
  • path：路由的路径
  • component：组件名称

在父组件中引入router对象：

var vm = new Vue({
    el:"#app",
    components:{// 引用登录和注册组件
        loginForm,
        registerForm
    },
    router // 引用上面定义的router对象
})
1
2
3
4
5
6
7
8

页面跳转控制：

<div id="app">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <div>
        <!--vue-router的锚点-->
        <router-view></router-view>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10

• 通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
• 通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

事实上，我们总共就一个HTML：index.html

5.Vuetify框架

官方网站：https://vuetifyjs.com/zh-Hans/

6.element-ui

官方网站：https://element-plus.gitee.io/zh-CN/

npm方式安装element-ui，能更好地和webpack打包工具配合使用

npm install element-ui

7.Vue模块化开发

1、npm install webpack -g

全局安装 webpack

2、npm install -g @vue/cli-init

全局安装 vue 脚手架

如果提示vue不是内部命令，需要安装全局的cli

npm install --global vue-cli

3、初始化 vue 项目；

vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个 appname项目

4、启动 vue 项目；

项目的 package.json 中有 scripts，代表我们能运行的命令

npm start = npm run dev：启动项目

npm run build：将项目打包