1 Vue数据绑定功能

最新推荐文章于 2024-04-22 09:07:57 发布

zlk_blogs

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量335

点赞数

分类专栏： Vue 前端框架文章标签： Vue 数据绑定

本文链接：https://blog.csdn.net/qq_34553637/article/details/89735433

版权

Vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端框架

7 篇文章 0 订阅

订阅专栏

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

1 Vue引入

在.html文件引入Vue,(熟悉的Node.js 的构建工具的情况，可以使用vue-cli，此处未使用)

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

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

2 数据渲染

将数据渲染进DOM。并绑定元素的特性title。其明显优点DOM元素获取简单，数据绑定方便。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue数据绑定功能</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <!--v-bind比较特殊，可以只写   :加后面(如:title)-->
        <div id="app" v-bind:title="vueTitle">
            {{massage}}
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                massage:'hello word!',
                vueTitle:'这是一个title,v-bind开头'
            }
        })
    </script>

</html>

3 vue实例中的参数与选项

el:"#id", //DOM成员（1/3）

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。

template:"",//DOM成员（2/3）

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot

render: (h)=>{h(App)}, //DOM成员（3/3）

字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。

data //数据成员（1/6）

data():{ return{ } }, Vue实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化

methods //数据成员（2/6）

methods:{ func(){ } } methods将被混入到 Vue 实例中，可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用方法中的 this自动绑定为 Vue 实例

watch //数据成员（3/6）

watch:{ key:value $route:function (newValue, oldValue) { //监控路由 } } 整个为一个对象，键是需要观察的表达式，值是对应回调函数

computed //数据成员（4/6）

computed:{ getTotalCount(){ const totalCount=0; return totalCount; } }, vue的计算属性，将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例

props //数据成员（5/6）

props:['counts','ids'], 用于父子组件的eventbus传值，是数组或对象，props的成员是子组件接收的来自父组件的数据

propsData //数据成员（6/6）

没用过。创建实例时传递 props。主要作用是方便测试

filters //资源（1/3）

filters('filterName',(input,function(){ return newvalue })) 包含 Vue 实例可用过滤器的哈希表。

directives //资源（2/3）

包含 Vue 实例可用指令的哈希表。

components //资源（3/3）

（即该组件的子实例）这里是包含 Vue 实例可用组件的哈希表。

name //杂项（1/6）

允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

parent //杂项（2/6）

指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

mixins //杂项（3/6）

mixins 选项接受一个混合对象的数组。Mixin钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。

extends //杂项（4/6）

允许声明扩展另一个组件。这主要是为了便于扩展单文件组件。这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。

delimiters //杂项（5/6）

改变纯文本插入分隔符。

functional //杂项（6/6）

使组件无状态（没有 data ）和无实例（没有 this 上下文）。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。

生命周期钩子（10）

beforeCreate
//在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

 created
 //实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见

 beforeMount
 //在挂载开始之前被调用：相关的 render 函数首次被调用。

 mounted
 //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

 beforeUpdate
 //数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

 updated
 //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作

activated
//keep-alive 组件激活时调用。

deactivated
//keep-alive 组件停用时调用。

 beforeDestroy
 //实例销毁之前调用。在这一步，实例仍然完全可用。

 destroyed
 //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

main.js导入根组件，渲染根组件

导入根组件：

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import ElementUI from 'element-ui';
import VueLazyload from 'vue-lazyload';
import VueMoment from 'vue-moment';
import Vuex from 'vuex';
import axios from 'axios';

//使用相对应的根组件
Vue.use(VueRouter);   //Vue.prototype.$route Vue.prototype.$router 
Vue.use(ElementUI);
Vue.use(VueLazyload, {
    loading: require('./statics/site/images/01.gif')  //懒加载的占位图
});
Vue.use(VueMoment);
Vue.use(Vuex);    //Vue.prototype.$store

//axios设定
axios.defaults.baseURL = "http://39.108.135.214:8899/";
Vue.prototype.$axios = axios;

//全局导入项目需要用到的css
import 'element-ui/lib/theme-chalk/index.css'
import "./statics/site/css/style.css"

创建根实例：

new Vue({
    el:"#app",
    router,
    store,
  render:function(createElement){ //render函数，用来渲染根组件
  return createElement(App)
    }
})

链接：https://www.jianshu.com/p/cf2611ed1b1f

参考

官网地址： https://cn.vuejs.org/

Ant Design of Vue地址：  https://vue.ant.design/docs/vue/introduce-cn/

zlk_blogs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1 Vue数据绑定功能

目录1 Vue引入2 数据渲染3 vue实例中的参数与选项介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供...
复制链接

扫一扫