vue学习之vue基本功能初探:
采用简洁的模板语法将声明式的将数据渲染进 DOM:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
v-bind方式绑定dom元素属性:
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
});
v-if进行条件控制:
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
v-for进行循环显示数据:
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
});
用v-on 指令绑定一个调用 Vue 实例方法的事件监听器:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});
v-model 指令,使表单输入和应用状态间的双向绑定变得轻而易举。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
});
组件化,使用vue.component()创建一个组件。
<div id="app-7">
<ul>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ul>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: '蔬菜' },
{ text: '奶酪' },
{ text: '随便其他什么人吃的东西' }
]
}
})
组件的应用是vue的一个最大的好处, Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范
下面是一个关于组件的预想结构:
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
vue学习之vue基本功能初探的更多相关文章
-
Vue学习笔记-Vue.js-2.X 学习(四)===>;脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
-
vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
-
Vue学习笔记-Vue.js-2.X 学习(六)===>;脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
-
Vue学习笔记-Vue.js-2.X 学习(五)===>;脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
-
Vue学习笔记-Vue.js-2.X 学习(三)===>;组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
-
Vue学习笔记-Vue.js-2.X 学习(二)===>;组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
-
Vue学习笔记-Vue.js-2.X 学习(一)===>;基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
-
vue学习之一vue初识
一.vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 ...
-
Vue学习笔记-Vue.js-2.X 学习(七)===>;脚手架Vue-CLI(路由Router)
脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...
随机推荐
-
Linux的fasync驱动异步通知详解【转】
本文转载自:http://blog.csdn.net/coding__madman/article/details/51851338 版权声明:本文为博主原创文章,未经博主允许不得转载. 工作项目用有 ...
-
Linq 查询结果 可能遵循 2 &#186;,2&#185;,2 &#178;,......增长计算
static void Main(string[] args) { , , , , , , , , }; var obj = from item in array orderby item ascen ...
-
vector与set区别(基础知识)
首先,vector是序列式容器而set是关联式容器.set包含0个或多个不重复不排序的元素.也就是说set能够保证它里面所有的元素都是不重复的.另外对set容器进行插入时可以指定插入位置或者不指定插入 ...
-
【原创】贴片电容的测量方法。。。这是我从自己QQ空间转过来的,本人实操!
电容不工作一般分为3种情况,漏电.击穿.无电容.一般检测用万用表检测阻值一般调在10K-20K为测量标准,特别是贴片电容.把万用表的笔尖点在贴片电容的两侧,如下图测量: l1.jpg l2.jpg l ...
-
Android 根据EditText搜索框ListView动态显示数据
根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layou ...
-
(1)ActivityThread分析
1. 入口. 曾经一直都说Activity的人口是onCreate方法.事实上android上一个应用的入口,应该是ActivityThread.和普通的java类一样,入口是一个main方法. pu ...
-
积累的VC编程小技巧之列表框
1.列表框中标题栏(Column)的添加 创建一个List Control,其ID为IDC_LIST,在其Styles属性项下的View项里选择Report.Align项里选择Top.Sort项里选择 ...
-
hdu 5635 LCP Array(BC第一题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5635 LCP Array Time Limit: 4000/2000 MS (Java/Others) ...
-
[Swift]LeetCode11. 盛最多水的容器 | Container With Most Water
Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...
-
区块链与Git版本工具的比较
区块链与Git版本工具的比较 来源:http://www.jianshu.com/p/b96b98983df6 作者: 梁波林 相同点: 1. 分布式存储方案 2. 链式数据 3. 去中心化 4. ...