Vue.js第一节
初识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>// 实例Vuevar s=new Vue({// 挂载点el:"#app",// 放置数据data(){return{// 创建一个属性名 我现在要把值赋给ididName:'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>