vue如何引用和使用，实例和挂在点的介绍
<!DOCTYPE html>

<html>

<head>

	<title>vue 入门</title>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

	<div id="root">

		// <h1>hellow {{msg}}</h1> //方式一的模板

	</div> //挂载点

	<script>

		new Vue({	//一个vue实例

			el: "#root" , //绑定挂载点

			template: '<h1>hellow {{msg}}</h1>' //方式二的模板

			data: {

				msg: "hellow word"

			}

		})

	</script>

</body>

</html>
挂载点，模板和实例
Vue实例中的数据，事件和方法

插值表达式与v-text和v-html

//插值表达式 {{mgs}}

//标签绑定内容 v-text和v-html

<body>

	<div id="root">

		{{msg}}

		<h1 v-text="number"></h1>

		<h1 v-html="number"></h1>

	</div>

	<script>

		new Vue({

			el: "#root" ,//和哪一个dom节点绑定

			data: {

				msg: "hellow word",

				number: '<span>123</span>'

			}

		})

	</script>

</body>

//v-text 输出 <span>123</span> 会转义

//v-html 输出 123 不会转义

事件函数v-on ，注意v-on: = @

<h1 v-text="number" @click="handleClick"></h1>

<h1 v-html="number" v-on:click="()=>{alert(123)}"></h1>

methods:{

 // handleClick: function(){

 // 	alert(321);

 // }

 handleClick: function(){

     this.msg = "world";

 }

}
Vue 中的属性绑定和双向数据绑定

属性绑定v-bind，注意v-bind: = :

<div id="root" v-bind:title="title">

		{{content}}

</div>

双向数据绑定，v-model

<div id="root" v-bind:title="title">

 <input  v-model="content">

 <div>{{content}}</div>

</div>
Vue中的计算属性和侦听器

计算属性，作用是将以前计算过的相同值做缓存，可以提高效率

侦听器，监测某一个数据或计算属性发生变化

<!DOCTYPE html>

<html>

<head>

	<title>vue 入门</title>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

	<div id="root">

		姓<input v-model="firstName"/>

		名<input v-model="lastName"/>

		<div>{{fullName}}</div>

		<div>{{count}}</div>

	</div>

	<script>

		new Vue({

			el: "#root" ,//和哪一个dom节点绑定

			data: {

				firstName: '',

				lastName: '',

				count: 0

			},

			computed: {//计算属性

				fullName: function(){

					return this.firstName + this.lastName;

				}

			},

			watch: { //侦听器

				// firstName: function(){

				// 	return this.count++;

				// },

				// lastName: function(){

				// 	return this.count++;

				// }

				fullName: function(){

					this.count++;

				}

			}

		})

	</script>

</body>

</html>
v-if，v-show，v-for指令

v-if和v-show的区别，v-if会将元素从dom节点删除，但v-show不会

v-for中v-bind:key

<div id="root">

 <div v-show="isShow">hello word</div>

	<button @click="isShow1">toggle</button>

	<ul>

		<li v-for="(item,index) of list" :key="index">{{item}}</li>

	</ul>

</div>

<script>

	new Vue({

 	el: "#root" ,//和哪一个dom节点绑定

     data: {

     	isShow: true,

         list: [1,1,3]

     },

     methods: {

         isShow1: function(){

	            this.isShow = !this.isShow;

         }

     }

 })

</script>

Vue2.5入门-1的更多相关文章

  1. vue2.0入门

    vue2.0 开发实践总结之入门篇   vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工 ...

  2. 【数据售卖平台】—— Vue2.0入门学习项目爬坑

    前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...

  3. Vue2.5入门-2

    todolist功能开发 代码 <!DOCTYPE html> <html> <head> <title>vue 入门</title> &l ...

  4. Vue2.0 入门 安装Vue-cli

    因为要用到npm命令先按装node.js 具体安装如下: 一.安装Node.js步骤 1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/2.选安装目 ...

  5. Vue2.5入门-3

    安装和使用 全局安装vue npm install --global vue-cli 创建基于webpack模板的新项目 vue init webpack my-project 安装依赖 cd my- ...

  6. vue2.x入门学习

    vue安装 # 最新稳定版本 $ npm install vue # 最新稳定 CSP 兼容版本 $ npm install vue@csp 引包 cd /d/vue/demo cnpm instal ...

  7. Vue2.5学习路线及基础知识总结。

    在接触新技术不了解时,我喜欢去慕课网上看新手教程,在学习vue时,在慕课网上看了几个老师的视频,发现这挺好,讲到挺详细的,适合新手,有兴趣的可以先看一下,vue2.5入门教程. 然后在学习路上看见了一 ...

  8. Vue入门到TodoList练手

    学习资料 慕课网 - vue2.5入门 基础语法 示例代码1 <div id="root"> <h1>hello {{msg}}</h1> &l ...

  9. vue

    vue.js 插件 setting--> plugins 搜索vue,下载安装如果想要高亮显示*.vue文件,可以在File Types 选项里找到HTML,然后在下方手动添加*.vue,这样就 ...

随机推荐

  1. c#listbox使用详解和常见问题解决

    关于ListBox ListBox是WinForm中的 列表 控件,它提供了一个项目列表(一组数据项),用户可以选择一个或者多个条目,当列表项目过多时,ListBox会自动添加滚动条,使用户可以滚动查 ...

  2. Http协议入门：

    HTTP 协议是互联网的基础协议,也是网页开发的必备知识,最新版本 HTTP/2 更是让它成为技术热点. 转自:http://www.ruanyifeng.com/blog/2016/08/http. ...

  3. .NET正则表达式Regex

    一.IsMatch(Input,patter[,options]) 否则匹配 如果表达式在字符串中匹配,返回布尔值. if (Regex.IsMatch("a.b.c.d", @& ...

  4. codeforces 407D Largest Submatrix 3

    codeforces 407D Largest Submatrix 3 题意 找出最大子矩阵,须满足矩阵内的元素互不相等. 题解 官方做法 http://codeforces.com/blog/ent ...

  5. 021.10 IO流 打印流

    内容:PrintStream:字节流    PrintWriter:字符流 PrintStream public static void main(String[] args) throws IOEx ...

  6. Linux下的MBR分区

    MBR分区 下面讲一讲如何给一块新添加入服务器的硬盘做MBR分区,那么为什么叫做MBR分区呢?后面会讲 做MBR分区,使用系统自带的fdisk工具.先看一看什么是fdisk,在命令行输入“fdisk” ...

  7. oracle exp 无法导出空表

    oracle exp 无法导出空表   select 'alter table '|| a.table_name ||' allocate extent;' from user_tables a wh ...

  8. 1、Dubbo-分布式系统定义

    1.分布式基础理论 1.1).什么是分布式系统? <分布式系统原理与范型>定义: “分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像单个相关系统” 分布式系统(distribu ...

  9. XCODE7 和IOS9适配后的一些问题

    网上比较常规的几个问题就不细说了. 什么HTTPS.bitcode.什么什么的. 记录几个自己又遇到了但是网上没有说的. 启动应用报错, *** Terminating app due to unca ...

  10. cocos2d-x开发: 完善接口范例分离模块

    在上一篇文章中,我阐述了一下为什么要做分离这种工作,这篇文章没什么重点,只是将上一次没有完善的工作做完.原本我想做到像Lua-tests那样子,能够一次完全显示所有的tests,然后选择要执行的tes ...