Vue 基础学习
Vue 基础学习
heaven_dad
不曾与你分享的时间,我在进步
展开
-
11. Vue Axios异步通信
11. Vue Axios异步通信什么是axios?Axios是一个开源的可以在浏览器端和Node.js的异步通信框架,主要功能是实现AjAx的异步通信。他不属于vue里面的,而是经常与vue一起使用实现ajax异步通信安装使用 npm:$ npm install axios使用 bower:$ bower install axios使用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></scr原创 2020-07-29 20:49:19 · 165 阅读 · 0 评论 -
10. Vue 路由
10. Vue 路由需要引入 vue-router.js 而且放在vue.js下面代码实现<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script src="vue-router.min.js"></script> <div id="app"> &l原创 2020-07-29 20:48:18 · 102 阅读 · 0 评论 -
9. Vue 生命周期
9. Vue 生命周期-Vue生命周期主要记住两个方法 created 和 mounted方法created在页面渲染之前执行mounted在页面渲染之后执行debugger相当于打断点 代码实现<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app">原创 2020-07-29 20:47:25 · 119 阅读 · 0 评论 -
8. Vue 组件化应用构建
8. Vue 组件化应用构建组件是Vue.js最强大的功能之一组件可以扩展html元素,封装可重用代码 局部组件代码实现 (用法就是标签引用组件)<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> <xuan></xuan>原创 2020-07-29 20:46:40 · 182 阅读 · 0 评论 -
7. Vue的vue-if和vue-for标签
7. Vue的vue-if和vue-for标签官网例子: https://cn.vuejs.org/v2/guide/conditional.html v-if 条件判断代码展示<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> <input type="原创 2020-07-29 20:44:16 · 762 阅读 · 0 评论 -
6. Vue 修饰符
6. Vue 修饰符可用于阻止表单提交<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> <!--修饰符用于指出一个指令应该以特殊方式绑定。 这里的.prevent修饰符告诉 v-on指令对于触发的事件调用js的 event.preventDefault()原创 2020-07-29 20:42:33 · 81 阅读 · 0 评论 -
5. Vue 事件绑定
5. Vue 事件绑定 代码演示1@click单击事件<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> <!-- 通过按钮实现事件的绑定 --> <button v-on:click="search()">查询结果<原创 2020-07-29 20:40:32 · 127 阅读 · 0 评论 -
4. v-model双向绑定
4. v-model双向绑定 代码演示1双向绑定就是一起发生变化<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> <input type="text" v-bind:value="user.name"></input> <原创 2020-07-29 20:39:12 · 95 阅读 · 0 评论 -
3. v-bind指令学习(单向绑定)
3. v-bind指令学习(单向绑定)v-bind 单向数据绑定 一般用在标签属性里面,获取值<body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> <!-- v-bind 单向数据绑定 一般用在标签属性里面,获取值 --> <h3 v-bind原创 2020-07-29 20:38:04 · 254 阅读 · 0 评论 -
2. 第一个Vue入门程序
2. 第一个Vue入门程序第一步:下载vue插件第二步:创建html 并且引入<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>第三步:编写基础的vue程序<!--View层 模板--><div id="app"> <!-- 使用插值表达式取值 --> {{message}}</div><原创 2020-07-29 20:36:43 · 94 阅读 · 0 评论 -
1.Vue介绍及相关知识描述
1.什么是Vue是一款渐进式的JavaScript框架,所谓渐进式就是逐步实现新特性的意思。如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular的模块化特性以及React的虚拟DOM特性。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。HTML+CSS+JS: 视图 :给用户看,刷新原创 2020-07-29 20:35:27 · 683 阅读 · 0 评论