查看: 665|回复: 0

vue.js笔记

[复制链接]

14

主题

14

帖子

126

积分

18级web开发班

Rank: 1

积分
126
发表于 2020-6-1 20:37:44 | 显示全部楼层 |阅读模式
一、vue.js安装
1、独立安装:直接从官网上下载,用<script>表签引入
2、使用CND方法
3、NPM方法  在vue.js构建大型应用是推荐使用NPM安装
二、vue.js目录结构

三、vue.js起步
每个 Vue 应用都需要通过实例化 Vue 来实现
语法格式:var vm = new Vue({ })
el:表示当前Vue要控制的页面区域
el:'#app'  el的属性值是一个字符串,一个选择器
data 用于定义属性,实例中有三个属性分别为:site、url、alexa。
methods 用于定义的函数,可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
四、vue.js模板语法
文本插值
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值
Html
使用v-html指令用于输出html代码
属性
HTML 属性中的值应使用 v-bind 指令
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持
指令
指令是带有 v- 前缀的特殊属性指令用于在表达式的值改变时,将某些行为应用到 DOM 上
参数
参数在指令后以冒号指明 例如, v-bind 指令被用来响应地更新 HTML 属性
修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定 例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
过滤器
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化

缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

五、条件语句
条件判断使用 v-if 指令
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术,更是梦想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {   
seen: true,   
ok: true  
}
})
</script>
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素


可以用 v-else 指令给 v-if 添加一个 "else" 块
v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用
我们也可以使用 v-show 指令来根据条件展示元素
六、循环语句
循环使用 v-for 指令
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名
v-for 可以绑定数据到数组来渲染一个列表
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据
v-for 迭代整数
v-for 也可以循环整数


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表