Vue 基础

Vue 简介

Javascript 框架
必须遵守使用规则
简化Dom操作
Vue会自动用语法获取Dom元素
响应式数据驱动

第一个Vue程序

3 steps
官方文档: https://v2.cn.vuejs.org/v2/guide

创建文件，引入Vue
a.开发环境版本
完整版本的jquery 适合学习，有提示

b.生产环境版本
min版本的jquery 速度较快，经过压缩的代码
声明式渲染

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

<div id="app">{{ message }}
</div>

var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})

将message中的值渲染到html中去
data是数据
{{ }}插值表达式，模板的语法
#是id选择器，el：“#app” 代表去找id=app的元素

步骤

导入开发版本的Vue.js
创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

el: 挂载点

Vue实例的作用范围
在el命中的元素内部都可以渲染
是否可以选择其他的选择器
id选择器，类选择器，标签选择器均可
一般用id选择器因为唯一，其他选择器会造成语义不清晰

class="app"
el:".app"

是否可以设置出了div以外的其他选择器
只能支持双标签（建议div），单标签不支持
注意双标签不能挂载到body或html上

data: 数据对象

<div id="app">{{ message }}<h2> {{ school.name }} </h2><ul><li> {{ campus[0] }} </li></ul>
</div>

data:{message:"",school:{name:"chuchu",mobile:""},campus:["", ""]
}

在vue中创建一个school对象，通过调用对象中的属性渲染前端；
获取数组中数据用[]；

Chapter1 Vue基础相关推荐

（vue基础试炼_05）简单组件之间的传值
接上一篇:(vue基础试炼_04)使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256 文章目录一.上篇回顾 ① 代 ...
（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基础试炼_02）使用vue.js实现隔2秒显示不同内容
接上一篇:(vue基础试炼_01)使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156 文章目录 ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
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 ...

Chapter1 Vue基础

Vue 基础

Vue 简介

第一个Vue程序

el: 挂载点

data: 数据对象

Chapter1 Vue基础相关推荐

最新文章

热门文章