VUE基础(躺着都能会)

一丶vue是什么

其实就是一套渐进式框架,与其他框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层.Vue完全有能力采用单文件组件和Vue生态系统支持的库开发复杂单页应用.

Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

官方网址:https://cn.vuejs.org/

二丶Vue安装

0.node.js

1.下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

　　2.CDN: <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

　　注意:把vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。

　　3.NPM:$ npm install vue

　　国内镜像:https://npm.taobao.org/

三丶Hello World　

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>第一个示例</title></head><body><!--导入vue--><script src="vue.js"></script>

<div id="app">    <!--渲染语法-->    <p>{{ message }}</p></div>

<!--js核心--><script>    new Vue({    el: "#app",    data:{        message: "Hello Vue.js!"          }             })</script>

</body></html>

页面显示:Hello Vue.js!

四丶声明式渲染

　　1.插入文本

　　Vue.js的核心就是用模板语法声明式的将数据渲染进DOM系统

<div id="app"><!--渲染语法--><p>{{ message }}</p>
</div><!--js核心-->
<script>new Vue({el: "#app",data:{message: "Hello Vue.js!"}})
</script>

　　2.绑定属性

　　除了插入文本,我们还可以绑定元素属性

<div id="app-2"><span v-bind:title="message">　　　　　鼠标悬停几秒钟来看此处绑定的提示信息!</span>
</div><script>var app2 = new Vue({el:"#app-2",data:{message:"页面加载于" + new Date().toLocaleDateString()}})
</script>v-bind被称为指令,指令带有前缀v-

页面显示

五丶条件与循环

　　1.条件:控制和切换

<div id="app-3"><p v-if="seen">现在你看到我了</p>
</div><script>var app3 = new Vue({el:"#app-3",data:{seen:true}})
</script>
true结果现在你看到我了
false结果为页面为空

　　2.循环:渲染列表

<div id="app-4"><ol><li v-for="todo in todos">{{ todo.text }}</li></ol>
</div><script>var app4 = new Vue({el: '#app-4',data: {todos: [{ text: '学习 JavaScript' },{ text: '学习 Vue' },{ text: '整个牛项目' }]}        })
</script>
在页面循环出列表

页面显示

六丶处理用户输入

v-on

<div id="app-5"><p>{{ message }}</p><button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({el: '#app-5',data: {message: 'Hello Vue.js!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}
})

v-model

<div id="app-6"><p>{{ message }}</p><input v-model="message">
</div>
var app6 = new Vue({el: '#app-6',data: {message: 'Hello Vue!'}
})

七丶组件化应用构建

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {template: '<li>这是个待办项</li>'
})现在你可以用它构建另一个组件模板
<ol><!-- 创建一个 todo-item 组件的实例 --><todo-item></todo-item>
</ol>

转载于:https://www.cnblogs.com/cangshuchirou/p/9215369.html

VUE基础(躺着都能会)相关推荐

（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必 ...
Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...
vue基础1--脚手架的使用与vue基础指令
脚手架的使用与vue基础指令安装 vue-devtools 安装vscode插件 1. Vue基本概念 1.1 Vue是什么 1.2 Vue学习的方式 2. @vue/cli脚手架 2.1 @vue ...
Vue 基础之常用内置指令
Vue 基础之常用内置指令描述指令内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
基于vue技术栈制作自己的简历网站问题总结篇(入门vue基础项目)
前言目前在学习vue技术栈的同时接触到了很多以前没用过的各种工具(如webpack,npm,git等等),配合着vue全家桶里的一些东西做了一个基于vue的个人简历网站(虽然用vue框架搭简历网站优 ...

VUE基础(躺着都能会)

VUE基础(躺着都能会)相关推荐

最新文章

热门文章