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. JavaScript学习---JavaScript基础知识

    JavaScript的引入方式 JavaScript的引入方式: 1.直接在script里面写: 2.使用<script src="JS的文件位置"> {#1 直接编写 ...

  2. Strsafe.h：更安全的C语言字符串处理函数

    原文出处:Strsafe.h: Safer String Handling in C 作者:Michael Howard 编译:王凌峰 在微软公司举行的Microsoft Windows Securi ...

  3. Xcode中模拟器慢

    取消下图中框框打勾

  4. Kafka TimeoutException: Batch Expired 问题排查

    当前系统中produer配置request.timeout.ms=30000(30秒),但是broker端配置zookeeper.connection.timeout.ms=1000000,kafka ...

  5. 【jQuery】动画小练习

    1.jQuery部分代码如下 <script type="text/javascript"> $(function(){ var page = 1; var i = 4 ...

  6. DPDK安装依赖项合集 环境合集

    前言 在dpdk编译过程中,由于一些依赖项的限制,dpdk在纯净的系统上安装需要花一些功夫.本文总结了编译dpdk所需的依赖项,并归纳了安装合集,在安装过程上可以省下大量的搜索时间. 使用系统 ubu ...

  7. 【Dubbo源码阅读系列】服务暴露之远程暴露

    引言 什么叫 远程暴露 ?试着想象着这么一种场景:假设我们新增了一台服务器 A,专门用于发送短信提示给指定用户.那么问题来了,我们的 Message 服务上线之后,应该如何告知调用方服务器,服务器 A ...

  8. 【Dubbo源码阅读系列】之 Dubbo SPI 机制

    最近抽空开始了 Dubbo 源码的阅读之旅,希望可以通过写文章的方式记录和分享自己对 Dubbo 的理解.如果在本文出现一些纰漏或者错误之处,也希望大家不吝指出. Dubbo SPI 介绍 Java ...

  9. Knowledge Point 20180506 深究Java的跨平台特性

    本章主题:从骨子里看Java的跨平台;本文内容部分摘自https://www.cnblogs.com/roger-yu/p/5827452.html 有过基础Java知识的开发人员都知道Java是跨平 ...

  10. iOS开发--MQTT实时处理数据

    一. MQTT 一个物联网项目中用到了MQTT协议, 可以用来做设备与软件之间的互通. MQTT: 即时通讯协议, 传输层协议 二. 常用: 1.MQTTKit(已经不维护了) 2.MQTTClien ...