1 hello world
引入vue.min.js 代码: ----2.0+版本
<div id="test">
{{str}}
</div>
<script>
var app = new Vue({
el: '#test',
data: {
str: 'hello world vuejs'
}
});
</script>
2 v-bind 指令(v-)
v-bind:title='str'
绑定到title,title显示的时候就会触发 3 条件与循环
条件 v-if="表达式的结果" 结果为真显示否则隐藏
循环 v-for 同for() 数据源为data的值 4 事件监听 v-on 代码展示
    <div id="test5">
<p>{{str}}</p>
<button v-on:click="reverseStr">逆转显示</button>
</div> var app5 = new Vue({
el: '#test5',
data: {
str: 'hello world Vue.js'
},
methods: {
reverseStr: function () {
this.str = this.str.split('').reverse().join('');
}
}
});

5 v-model 使表单输入和应用状态间双向绑定 同ng-model
    <div id="test6">
<p>{{str}}</p>
<input type="text" v-model="str">
</div>
var app6 = new Vue({
el: '#test6',
data: {
str: '两只老虎跑得快'
}
});

6 vue.js内置的指令
v-if 条件渲染指令
v-show 条件渲染指令 指令的元素始终会被渲染到html,这是简单的为元素设置style属性
v-else
可以为v-if或v-show添加一个'else块',必须跟在其后面
v-else的元素是否显示取决于前面是v-if还是v-show v-if为true v-else不会渲染到dom v-show为true或false v-else都不会渲染到html
v-for 遍历数组 xx in xx
v-bind 语法:v-bind:argument='expression'
argument表示html元素的特性如(attribute) 或 v-bind:class 可以高亮当前页 可缩写为:一个冒号
v-on 语法与v-bind类似 监听dom事件
调用方法:1 绑定一个方法名(让事件指向方法的引用)2 使用内联语句(执行方法) 可缩写为:@符号

指令补充

指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for,之后再讨论)。

指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。让我们回顾一下在介绍里的例子:

<p v-if="seen">Now you see me</p>

这里, v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。


7 应用组件化 --用小型,自包含和可以复用的组件构建大型应用
        <div id="test">
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template: '<h1>原来是个h1</h1>'
});
var app = new Vue({
el: '#test',
})
</script> <div id="test">
<my-component v-for="item in groceryList" :todo="item"></my-component>
</div>
<script>
Vue.component('my-component',{
//组件现在接收一个 'prop'类属于一个自定义属性属性名为todo
props: ['todo'],
template: '<h2>{{todo.text}}</h2>'
});
var app = new Vue({
el: '#test',
data: {
groceryList: [
{ text: '蔬菜' },
{ text: '奶酪' },
{ text: '随便其他什么人吃的东西' }
]
}
})
</script>

8 小案例---由于 $index 问题 案例使用 ---vue.js 1.0.5
<div id="app">

    <fieldset>
<legend>
添加新用户
</legend>
<div class="form-group">
<label>姓名:</label>
<input type="text" v-model="newPerson.name"/>
</div>
<div class="form-group">
<label>年龄:</label>
<input type="text" v-model="newPerson.age"/>
</div>
<div class="form-group">
<label>性别:</label>
<select v-model="newPerson.sex">
<option value="男" selected = "selected">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<label></label>
<button @click="createPerson">添加</button>
</div>
</fieldset>
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
<td :class="'text-center'"><button @click="deletePerson($index)">删除</button></td>
</tr>
</tbody>
</table>
</div> <script>
var app = new Vue({
el: '#app',
data: {
newPerson: {
name: '',
age: 0,
sex: '男'
},
people: [{
name: '张三',
age: 30,
sex: '男'
}, {
name: '李四',
age: 26,
sex: '男'
}, {
name: '王五',
age: 22,
sex: '女'
}, {
name: '赵六',
age: 36,
sex: '男'
}]
},
methods: {
createPerson: function () {
this.people.push(this.newPerson);
//添加完newPerson对象后,重置newPerson对象
this.newPerson = {name:'',age:'',sex:'男'}
},
deletePerson: function (index) { //实参$index在2.0+版本无此功能
this.people.splice(index,1);
}
}
})
</script>
  
												

ch1-vuejs基础入门(hw v-bind v-if v-for v-on v-model 应用组件简介 小案例)的更多相关文章

  1. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_03-vuejs研究-vuejs基础-入门程序

    本次测试我们在门户目录中创建一个html页面进行测试,正式的页面管理前端程序会单独创建工程. 在门户目录中创建vuetest目录,并且在目录下创建vue_01.html文件 <!DOCTYPE ...

  2. MacOS下VUEJS简单入门

    微信搜索"艺术行者",关注并回复关键词"vue"获取课程资料 上传的在线学习视频(黑马和传智双元,感谢) VueJs概述与快速入门 学习之前假设你已了解关于 H ...

  3. JavaScript基础入门05

    目录 JavaScript 基础入门05 严格模式 严格模式的设计目的 如何开启使用严格模式 显式报错 字符串 字符串的创建 字符串实例方法之常用API JavaScript 基础入门05 严格模式 ...

  4. docker容器技术基础入门

    目录 docker容器技术基础入门 容器(Container) 传统虚拟化与容器的区别 Linux容器技术 Linux Namespaces CGroups LXC docker基本概念 docker ...

  5. Shell编程菜鸟基础入门笔记

    Shell编程基础入门     1.shell格式:例 shell脚本开发习惯 1.指定解释器 #!/bin/bash 2.脚本开头加版权等信息如:#DATE:时间,#author(作者)#mail: ...

  6. Linux 基础入门(新版)”实验报告一~十二

    实验报告 日期: 2015年9月15日 一.实验的目的与要求 熟练地使用 Linux,本实验介绍 Linux 基本操作,shell 环境下的常用命令. 二.主要内容 1.Linux 基础入门& ...

  7. Linux基础入门学习笔记20135227黄晓妍

    学习计时:共24小时 读书:1小时 代码:8小时 作业:3小时 博客:12小时 一.学习目标 1. 能够独立安装Linux操作系统   2. 能够熟练使用Linux系统的基本命令   3. 熟练使用L ...

  8. [.ashx檔?泛型处理程序?]基础入门#5....ADO.NET 与 将DB里面的二进制图片还原 (范例下载 & 大型控件的ImageField)

    [.ashx檔?泛型处理程序?]基础入门#5....ADO.NET 与 将DB里面的二进制图片还原 (范例下载 & 大型控件的ImageField) http://www.dotblogs.c ...

  9. Mongoose基础入门

    前面的话 Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具.本文将详细介绍如何使用Mongoose来操作MongoDB NodeJS驱动 在介绍Mongoose之 ...

随机推荐

  1. Maven简述

    一.前言     以前做过的项目中,没有真正的使用过Maven,只知道其名声很大,其作用是用来管理jar 包的.最近一段时间在项目过程中使用Maven,用Maven构建的web项目,其项目结构只停留在 ...

  2. Redis 常用数据结构及其控制命令整合

    Redis 键值支持5种基本结构,分别是字符串,列表,哈希,集合,有序集合.每一种数据结构都有对应的取值和设值命令,辅助命令,除此之外,还有一些全局命令,用来管理Redis存储的所有 键. 全局命令 ...

  3. eclipse+git

    最近朋友都推荐使用github管理自己的项目,而且免费用户可以有5个仓库,恰好我也想了解下git,借此机会学习一下.github官方指南使用独立第三方git工具来进行版本控制,并不借助于eclipse ...

  4. Jsp与beetl的比较

    首先介绍一下模板引擎的概念,是为了使用户界面与业务数据分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎,就会生成一个标准的html文档. Jsp全名是JavaServer Page,中文名叫 ...

  5. go golang 笔试题 面试题 笔试 面试

    go golang 笔试题 面试题 笔试 面试 发现go的笔试题目和面试题目还都是比较少的,于是乎就打算最近总结一下.虽然都不难,但是如果没有准备猛地遇到了还是挺容易踩坑的. 就是几个简单的笔试题目, ...

  6. 团队作业8——第二次项目冲刺(Beta阶段)5.18

    1.当天站立式会议照片 会议内容: 本次会议为第一次会议 本次会议在陆大楼2楼召开,本次会议内容: ①:部署第二次敏捷冲刺的计划 ②:做第一天任务的详细分工 ③:规定完成时间是在第二天之前 ④:遇到困 ...

  7. 使用properties配置文件为javabean注入属性值

    ①:实体类 package com.hts.entity; import java.io.Serializable; public class A implements Serializable{ p ...

  8. 201521123119《Java程序设计》第12周学习总结

    1. 本周学习总结 Q1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doub ...

  9. Map.containsKey方法——判断Map集合对象中是否包含指定的键名

    该方法判断Map集合对象中是否包含指定的键名.如果Map集合中包含指定的键名,则返回true,否则返回false. public static void main(String[] args) { M ...

  10. 个人从源码理解angular项目在JIT模式下的启动过程

    通常一个angular项目会有一个个模块(Module)来管理各自的业务,并且必须有一个根模块(AppModule)作为应用的入口模块,整个应用都围绕AppModule展开.可以这么说,AppModu ...