初识Vue、插值操作、属性绑定
初识：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第一步引入相关的JS文件 -->
<script src="./../utils/vue.js"></script>
</head>
<body>
<div id="app">
12y327y328
<div>{{num}}</div>
</div>
</body>
<script>
// 现在思路全部跟之前的不一样
// 创建最简单的
// 创建一个实例得到一个对象
const vue= new Vue
(
{
// 这个也称为挂载点 会跟目标标签进行绑定，从此被vue管理
el: "#app",
// 用来放数据的 在VUE的区域声明变量
data:
{
num: 0
}
}
)
console.log(vue);
</script>
</html>属性绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../utils/vue.js"></script>
<style>
.card
{
width: 300px;
height: 300px;
border: 1px solid black;
}
/* 加一个激活样式 */
.active
{
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind:动态绑定标签中的属性值来源，从`data`中获取或者写一些表达式。Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
**形式**： -->
<!-- 那么我们在这边加上一个v-bind: 以及下面Vue中data的属性名 -->
<button v-bind:id="idName">按钮</button>
<!-- 也可以这样 -->
<button :id="idName">按钮</button>
<!-- 只要是标签的属性都能够绑定 value就是我们之前讲过的预设的输入值-->
<!-- -->
<input type="text" :value="inputText">
<!-- 要么是Option内容 要么是js代码 记得加上单引号 -->
<input type="text" :value="1<0?'单号':'双汇'">
<!-- 如果我下面有一排的card 有点像我们的轮播图 active的目标是一直在变的 在Vue是如何实现的 -->
<div class="card active"></div>
<div class="card "></div>
<div class="card "></div>
<div class="card "></div>
<div class="card "></div>
</div>
</body>
<script>
// 实例Vue
var s=new Vue(
{
// 挂载点
el:"#app",
// 放置数据
data()
{
return{
// 创建一个属性名 我现在要把值赋给id
idName:'text',
inputText:"请输入。。。。。。。。。。。。。。。"
}
}
})
</script>
</html>Vue强化class绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../utils/vue.js"></script>
<style>
.box
{
width: 100px;
height: 100px;
background-color: aqua;
}
.active
{
background-color: red;
}
.active-fuben
{
background-color: red;
}
</style>
</head>
<body>
<!-- class 绑定 -->
<div id="app">
<div :class="'box active'"></div>
<h1>字符串绑定</h1>
<!-- 一旦加上冒号的话 vue是会直接认作是变量 -->
<div :class="'box'"></div>
<div :class="text"></div>
<!-- obj绑定 新 赋值的是对象类型-->
<!-- 重点：如果我们要控制某个样式的显示和隐藏这时候就变得很快了 -->
<h1>obj绑定 新 </h1>
<div :class="obj"></div>
<!-- 属性绑定 以及绑了一个对象 actives：是一个变量会去data找 ，所以一定要声明 -->
<div :class="{box:true, active: actives }"></div>
<!-- ------------------------ -->
<h1>绑定数组 字符串和对象的结合体</h1>
<!-- 那么数组的每一个元素（只能是字符串否则不被接受）都会被渲染到目标上；并且数组里面还可以放对象(好处就是在于我们标签碰到一堆类名的时候，并且有些是固定的有些是不固定的，
这时候我们声明一个数组，然后把固定的像box,直接写在数组里，对于那些不固定的我们用一个对象包裹着，对象里面) -->
<div :class="['box','123',{active:actives}]"></div>
<!--命名 技巧 -->
<h1>jiqiao</h1>
<div :class="active-fuben"></div>
</div>
</body>
<script>
//
var s=new Vue(
{
el:"#app",
data()
{
return{
text:'box',
obj:{
//
box:true,
// 记住只要是属性值对应到bool，那么就会生效 例子在下面，这时候我们就可以在别的地方去控制这个值，比如点击事件 当我
// 点击的时候我们就可以把这个值改为 true or false了
// 平常写代码的时候，我们一般先把true写死
actives:1>0,
'active-fuben':true
},
actives:1>0,
'active-fuben':true
}
}
})
</script>
</html>Vue强化style绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../utils/vue.js"></script>
<style>
.box
{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<h1>字符串</h1>
<!-- 用的不多 没必要 -->
<div class="box" :style="text"></div>
<!-- 对象绑定用得比较多-->
<div class="box" :style="objs"></div>
<h1>-------------------------------</h1>
<!-- 数组绑定 它的这个数组比较特殊 因为它这个数组里面只能放对象 用的比较少但是要知道-->
<div class="box" :style="[obj1,obj2]"></div>
<div class="box" :style="[obj1,1<0?obj2:{}]"></div>
</div>
</body>
<script>
var s=new Vue({
el:"#app",
data()
{
return{
text:'background-color: blueviolet',
objs:{
'background-color':'red',
'border':'5px solid black'
},
obj1:{
'background-color':'blue'
},
obj2:{
'border':'5px solid yellow'
}
}
}
})
</script>
</html>插值语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 我们在项目的时候，一般都是采用阻塞式，必须得vue加载完才能往下走 -->
<script src="./../utils/vue.js"></script>
</head>
<body>
<div id="app">
<!-- Mus语法：没有VUe的话正常的话会被当做是文本显示 -->
<div>{{H}}</div>
<div>{{num}}</div>
<!-- VUE指令都是写在标签里面的 -->
<!-- 那么这个值vue就会去data里面找 只能解析为字符串 前面VUE加载完，当VUE读到v-text指令的时候 会找到num,再把值放进来-->
<div v-text="num"></div>
<!-- ----------v-html--------------------- -->
<div v-html="htmls"></div>
<!-- ------有时候我们确实只想要字符串，不被VUE解析------------- -->
<div v-pre>{{H}}</div>
<!-- v-once与上面v-text效果相同但是区别在于只渲染一次数据 不跟随响应式变化 -->
<div v-once>{{num}}</div>
</div>
</body>
<script>
var s= new Vue(
{
el:"#app",
// 之前我们data里面写的是以键值对的方式,现在变了
// 我们把数据写在return里面 这一步是为了做数据隔离-组件之后才知道为什么
data()
{
// 这里记住{不能换行，否则无法被Vue识别到
return{
/**
* 当一个 Vue 实例被创建时，它将 `data` 对象中的所有的 `property`(属性)
* 加入到 Vue 的**响应式系统**中。内部可以监听到变量的值发生变化，对应页面上也会发生变化，跟之前完全变了，我们只要告诉数据是啥，
* 然后变量在哪个位置显示
* 当这些 `property` 的值发生改变时，
*
* 视图将会产生“响应”，即匹配更新为新的值。
*
* **/
H: "hello word",
num:123,
htmls:`<div>123</div><div>dnskds</div>`
}
}
})
// // 每两秒执行一次
// setTimeout(() => {
// s.num++;
// }, 2000);
</script>
</html>