VUE
Tony90hou
关注生活 关注民生
展开
-
循环使用 v-for 指令
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 指令 <div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> ne...原创 2020-07-09 10:15:21 · 415 阅读 · 0 评论 -
继续记录Vue.js 计算属性
计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1 <div id="app"> {{ message.split('').reverse().join('') }} </div> 尝试一下 » 实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2 <div id="app"> <p>原始字符串: {{ message }}&..原创 2020-07-08 10:15:18 · 119 阅读 · 0 评论 -
简单介绍一下Vue.js 条件与循环
条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-if 指令: <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术,更是梦想!</p> <p>哈哈哈,打字辛苦啊!!...原创 2020-07-07 23:00:39 · 139 阅读 · 0 评论 -
简单介绍一下Vue.js 模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值 文本 数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值: 文本插值 <div id="app"> <p>{{ message }}</.原创 2020-07-07 22:54:34 · 172 阅读 · 0 评论 -
我们简单介绍一下Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: var vm = new Vue({ // 选项 }) 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: 实例 <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div>...原创 2020-07-06 16:34:52 · 107 阅读 · 0 评论 -
我们介绍一下Vue.js 目录结构
目录解析 目录/文件说明 build项目构建(webpack)相关代码 config配置目录,包括端口号等。我们初学可以使用默认的。 node_modulesnpm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: assets: 放置一些图片,如logo等。 components: 目录里面放了一个组件文件,可以不用。 App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 compone...原创 2020-07-06 16:32:33 · 143 阅读 · 0 评论 -
我们简单的介绍一下Vue.js 安装
1、独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 下载 Vue.js 2、使用 CDN 方法 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。 Staticfile CDN(国内) unpkg cdnjs Staticfile CDN(国内) <div id="app"> <p>{{ message }}</p> </div> ..原创 2020-07-06 16:29:22 · 154 阅读 · 0 评论