vue框架学习-----vue简介&vue.js安装&第一个vue程序&部分vue指令-易微帮

什么是vue?

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

下面是一个基础的例子

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

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

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

结果为

Hello Vue!

{{ 变量 }} ,插值表达式获取 data 数据

new Vue();创建 Vue 对象(VM 对象)

el:数据挂载的 dom 对象

Vue 会管理 el 选项命中的元素及其内部的后代元素

可以使用其他的选择器，但是建议使用 ID 选择器

可以使用其他的闭合标签，不能使用 HTML 和 BODY

data:{ message:’hello world’} model 数据

vue安装方法

直接用

直接下载并用

学习时可以这样使用最新版本

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

命令行工具 (CLI)

不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

vue指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性

创建标签

<div id="app">
<p>{{message}}aaaaa</p>
<p v-html="message">aaaa</p
><p v-text="message">aaaaa</p>
</div>

插入一个值,不影响标签中的其他内容

不能解析内容中的html标签

v-text = “message”

作用是设置标签的文本内容
默认写法会替换全部内容，使用差值表达式可以替换指定内容
内部支持写表达式

<p v-text="message">你好vue</p>
<p>{{message}}你好vue</p>

v-html = “message”

作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式

<p v-html="message">你好vue</p>

v-on

作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数

<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test" />


methods:{
test(a,b){
alert(a);
  }
}

v-model

作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值双向数据绑定

<input type="text" v-model="message"/>
<p>{{message}}</p>

data:{
message:""
}

v-show

作用是根据真假切换元素的显示状态
原理是修改元素的 display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为 true 元素显示，值为 false 元素隐藏
数据改变之后，对应元素的显示状态会同步更新

<img v-show="isShow" src="img/3.jpg" />
<img v-show="age>18" src="img/3.jpg" />

data:{
isShow:true, age:20
}

v-if

作用是根据表达式的真假切换元素的显示状态
本质是通过操纵 dom 元素来切换
显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除
频繁的切换使用v-show，反之则使用 v-if，前者的切换消耗小

v-bind

作用是为元素绑定属性
完整写法是 v-bind：属性名
简写的话可以直接省略 v-bind，只保留：属性名

<img v-bind:src="imgSrc" />
<img :src="imgSrc" /> //简写
<img :title="imgTitle" :src="imgSrc" /> 

data:{
imgSrc:'img/3.jpg' imgTitle:"这是一张图片"
}

可以传给 v-bind:class 一个对象，以动态地切换 class

<div v-bind:class="{ active: isActive }"></div>
data:{
isActive :true
}

v-for

作用是根据数据生成列表结构
数组经常和 v-for 结合
使用语法是（item，index）in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的
为循环绑定一个 key 值 :key=”值” 尽可能唯一

<li v-for="item in array">
{{item}}省
</li>
<li v-for="(item,index) in array">
{{index+1}}{{item}}省
</li>
<li v-for="(item,index) in objects">
{{index+1}}{{item.name}}{{item.age}}
</li>

data:{
array:['陕西','山西','河南'], objects:[
{name:'admin',age:23}, {name:'jim',age:22}
]}

vue框架学习-----vue简介&vue.js安装&第一个vue程序&部分vue指令