VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客：https://www.liboer.top/articles/detail/vue-BasedUse/
文章目录
- VUE.js
-
- 基础
-
- 安装
-
- CDN
- 下载
- 安装
- 命令行工具（CLI脚手架）
- 开始使用
-
- 建议使用的IDE：HBuilderX
- Hello Vue
- 条件与循环
- 处理用户输入
- Vue实例
-
- 创建一个vue实例
- 数据与方法
- 模板语法
- 计算属性和侦听器
-
- 计算属性
- 侦听器
- class与style绑定
-
- 绑定HTML Class
VUE.js
官方文档：https://cn.vuejs.org/v2/guide/components-props.html
基础
安装
CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
// 建议引入带有版本号的
<script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
下载
https://cdn.jsdelivr.net/npm/[email protected]
打开此链接，新建一个vue.js文件，ctrl+a 全选， ctrl+c 复制 ctrl+v粘贴
<script src="vue.js">script>
安装
# 最新稳定版
$ npm install vue
命令行工具（CLI脚手架）
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。
这个需要一定基础，后边再学。
开始使用
建议使用的IDE：HBuilderX
https://www.dcloud.io/hbuilderx.html
使用标准版即可
解压后即可使用，我们新建一个普通项目，选择vue项目（普通模式）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WfcH2lgK-1618130967977)(https://i.loli.net/2021/04/11/F2WyNGPmYiBDcUg.png)]
Hello Vue
数据和 DOM 已经被建立了关联，所有东西都是响应式的。打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
{
{message}}
div>
<script type="text/javascript">
// 声明一个vue对象
let app = new Vue({
el:"#app",
// 数据
data:{
message:"Hello Vue!"
}
})
script>
body>
html>
绑定元素 attribute：
<div id="app02">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
span>
div>
<script type="text/javascript">
// 声明一个vue对象
let app2 = new Vue({
el:"#app02",
data:{
message:'页面加载于 ' + new Date().toLocaleString()
}
})
script>
v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。
条件与循环
v-if v-else 之间不能有其他不在判断语句之中的内容
v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app03">
<p v-if="seen">现在你看到我了！p>
<li v-for="item in todos">{
{item.text}}li>
div>
let app3 = new Vue({
el:"#app03",
data:{
seen:true,
todos:[
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
],
}
})
//在浏览器调试窗口改变seen的值，你会发现网页立马变化。同步的。
app3.seen = false
false
app3.seen = true
true
处理用户输入
v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
<div id="app04">
<p>{
{message}}p>
<input v-model="message" />
<button v-on:click="reverse">反转button>
div>
let app4 = new Vue({
el:"#app04",
data:{
message:"Hello Vue!"
},
//方法
methods:{
reverse:function(data){
this.message = this.message.split('').reverse().join('')
}
}
})
Vue实例
创建一个vue实例
通过上边的了解，我们已经知道，vue实例：
var vm = new Vue({
// 选项
})
数据与方法
数据：data，里边为键值对。
方法：methods，方法名:对应的函数。
模板语法
v-onec 只插入一次
v-html 渲染标签，相当于Django中的safe过滤，不加可以防止XSS攻击
v-bind 绑定一个属性，可以缩写成 :绑定的属性字段名曾
v-on 事件绑定，可以缩写成 @click=
表达式应用
三元运算符
代码实例
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
<h1>{
{msg}}h1>
<h1 v-once>{
{msg}}h1>
<h1>{
{htmltext}}h1>
<h1 v-html="htmltext">h1>
<div :id="idname">
<h1>{
{idname}}h1>
div>
<h1>{
{firstName+lastName}}h1>
<h1>{
{isVip?"Vip":"novip"}}h1>
<h1><button type="button" @click="changeBg">改变背景button>h1>
div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:"hello vue",
htmltext:"hello",
idname:'login',
firstName:"张",
lastName:"三",
isVip:true,
},
methods:{
changeBg:function(){
document.body.style.background = "skyblue"
}
}
})
script>
body>
html>
计算属性和侦听器
计算属性
computed
代码
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
<h1>{
{firstname + lastname}}h1>
<h1>{
{fullname}}h1>
<h1>{
{reverseMsg}}h1>
div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
firstname:'张',
lastname:'三',
msg:'hello vue',
},
computed:{
// 计算属性
fullname:function(){
// 会将计算的结果进行缓存,只要遍历属性值不变,就不会重新计算
return this.firstname+this.lastname
},
// get和set事件,当reverseMsg改变后,会调用set方法
reverseMsg:{
get:function(){
return this.msg.split('').reverse().join('')
},
set:function(val){
console.log(val)
this.msg = val
}
}
}
})
script>
body>
html>
侦听器
尽量不要多用，可以用coputed
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
{
{msg}}
div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
msg:"hello vue"
},
// 监听事件
watch:{
msg:function(val){
console.log(val)
}
}
})
script>
body>
html>
class与style绑定
绑定HTML Class
通过对象的方式决定是否存在某个类
通过数组加载类名
直接放置字符串
混合使用
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
width: 200px;
height: 200px;
background-color: skyblue;
}
style>
<title>title>
<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
head>
head>
<body>
<div id="app">
<div id="" :class="{active:isTrue}" class="page">
div>
<div id="" :class="styleObj" class="page">
div>
<div id="" :class="styleArr">
div>
<div id="" :class="styleStr" class="page-9">
div>
<div id="" :class="arrobj">
div>
div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isTrue:true,
styleObj:{
active:true,
laochen:true,
"col-6":true,
},
styleArr:['col-lg-2', 'col-xs-12'],
styleStr:"abc page col-mg-9",
arrobj:["abc", {
active:true}]
},
computed:{
trueis:{
get:function(){
return
},
set:function(val){
console.log(val)
this.isTrue = val
}
}
}
})
script>
body>
html>