Vue基础
|
前置知识 |
HTML+CSS+JavaSricpt+WebAPI(DOM+BOM)+Ajax |
|
创建Vue |
<script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script> |
|
el |
el用于设置挂载点； el会命中匹配的元素和内嵌的匹配元素； 可以使用其他选择器，但是建议使用ID选择器，因为ID是唯一的； 不能使用HTML和BODY标签，但是可以使用其他双标签，不能使用单标签； '#app'（双引号也行”#app”）挂载到id=“app”标签； “.app”挂载到所有class=“app”的标签； “div”挂载到所有div标签；
|
|
data |
数据和变量放在data中； data可以存放所有类型的数据，数值类型、字符串、object、数组等； 渲染复杂类型时，遵循JS语法即可； |
|
{{}} |
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值; <div id="app"> <p>{{ message }}</p> </div> |
|
v-text |
将内容绑定为纯文本，也就是字符串； v-text应该放在开始标签内，而不是开始和结束标签之间； v-text通过设置标签属性，改变标签的内容； v-text应该放在开始标签内，就会将标签内容设置为v-text指定的变量内容； <div v-text="message"></div> |
|
v-html |
v-html如果传入的数据是文本字符串，和v-text等价； v-html可以设置元素的内嵌html； 内容中有html结构，就会被解析为html标签； v-text只会解析纯文本，而不会解析html文本； <div v-html="message"></div>
|
|
v-on |
为元素绑定事件； 事件名称不需要写on； v-on指令可以简写为@； 绑定的方法定义在methods属性中；
<button v-on:click="reverseMessage">反转字符串</button> <button @click="reverseMessage">反转字符串</button>
|
|
v-show |
v-show指令用于控制元素的显示和隐藏； v-show的工作原理是修改元素的display属性，实现html元素的显隐； v-show指令后面的内容，最终都会被解析为bool类型的值； v-show：true则显示，false则隐藏； 0表示false，非0数值表示true（如0.1，666）； 其他类型变量，如果是null表示false，否则true；
|
|
v-if |
v-if用来控制元素的显示状态，和v-show类似； v-if通过曹总dom元素，来切换显示状态； v-if的表达式为true，元素存在于dom树中，否则从dom树中移除；
<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>
|
|
show/if |
v-show操作元素的属性，而元素始终都存在于DOM树中； v-if操纵DOM树，会将元素从DOM树移除或添加； 对于频繁切换的应使用v-show；不频繁的用v-if； 因为操作DOM树资源消耗比较大； |
|
v-bind |
为命名属性绑定值； :后面是绑定的属性名称； =后面是Vue中变量的名称； 简写语法省略v-bind，而直接使用冒号：； <img v-bind:src=”imgSrc”>简写<img :src=”imgSrc”> 字符串拼接，imageTitle是字符串变量，+用来拼接字符串，后面的’!!!’是待拼接的字符串值，外边用了双引号，这里就只能用单引号； <img v-bind:title=”imageTitle+’!!!’”> 三元表达式如果变量isActive为真，则用active作为class的名称，否则空字符串； 双引号内部的字符串会被解析为变量名称； 双引号内的单引号内容会被解析为字符串； <img v-bind:class=”isActive?’active’:’’”> 如果变量isActive为真，则用active作为class的名称，否则空字符串； 这和三元表达式的效果等价； <img v-bind:class=”{active:isActive}”> |
|
v-for |
v-for作用是根据数组数据生成列表； v-for经常和数组一起使用； v-for语法是(item,inedex)in array； 数组长度更新会即时同步到页面上，是相应式的；
|
|
v-model |
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。 输入表单和变量值进行双向绑定，任何一方的数据改变，都会同步到另一方； v-model用来设置和获取表单元素的值； 绑定数据会和表单元素值相关联； 双向绑定：绑定的数据←→表单元素值； |