Vue基础教程|vue基础教程（上篇）前端|vue

?? 目录

2、vue基础教程
- 一.初识vue
- - 1.什么是vue
  - 2.安装vue
  - 3.MVVM的介绍
  - 4.一个Hello World小案例
- 二.vue基础语法
- - 1.指令
  - - 1.1 v-text
    - 1.2 v-html
    - 1.3 v-on
    - 1.4 v-bind
    - 1.5 v-if/v-show
    - 1.6 v-if/v-else-if/v-else
    - 1.7 v-for

2、vue基础教程一.初识vue 1.什么是vue

Vue.js（读音 /vju?/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
【Vue基础教程|vue基础教程（上篇）】当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

2.安装vue

方法一(不推荐使用）：进入官网，安装Vue Devtools插件（使用Chrome浏览器）

? 官网网址如下：https://vuejs.bootcss.com/guide/installation.html

方法二：在 Vue.js 的官网上直接下载 vue.min.js 并用

3.MVVM的介绍
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

文章图片
4.一个Hello World小案例

vue基础src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> {{name}} type="text/javascript"> // 创建vue实例 var app = new Vue({ el: '#root', data: { name: 'Hello World!' } })

二.vue基础语法 1.指令
1.1 v-text 通过v-txet，可以替换掉了标签中的内容，但会覆盖元素内部原有的内容，在实际开发中大多使用{{}}插值表达式。

{{name}} type="text/javascript"> var app = new Vue({ el: '#root', data: { name: 'Hello World!' } })

1.2 v-html v-text和插值表达式只能渲染纯文本，但v-html可以把带有标签的字符串，渲染成真正的HTML内容。

type="text/javascript"> const vm = new Vue({ el: '#root', data: { info:'一起学习vue.js ' } })

1.3 v-on v-on是一个事件绑定指令，用来辅助程序员绑定事件监听

count的值是: {{count}} type="text/javascript"> const vm = new Vue({ el: '#root', data: { count: 0 }, methods: { add: function () { console.log('ok') } }, })

1.4 v-bind 给元素的属性动态绑定属性值。

type="text/javascript"> const vm = new Vue({ el: '#root', data: { tips: '请输入用户名' },})

1.5 v-if/v-show 辅助开发者对元素进行显示或隐藏的操作。

大头是你的大头呢 type="text/javascript"> const vm = new Vue({ el: '#root', data: { flag:true },})

1.6 v-if/v-else-if/v-else 与v-if同时使用，可以选择。

A B C Not A/B/C type="text/javascript"> const vm = new Vue({ el: '#root', data: { type:'A' }})

1.7 v-for 用来辅助开发者用一个数组来循环渲染一个列表结构，常用于item in items形式的特殊语法。

索引 id 姓名 {{index}} {{item.id}} {{item.name}} type="text/javascript"> const vm = new Vue({ el: '#root', data: { list: [ { id: 1, name: '大头' }, { id: 2, name: '小头' }, { id: 3, name: '大腿' } ] } })