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. POP动画[2]

    POP动画[2] 1:定制控制器间的转场动画. 源码有点多-_-!! // // RootViewController.h // Animation // // Copyright (c) 2014年 ...

  2. 在NGUI中高效优化UIScrollView之UIWrapContent的简介以及使用

    前言: 1.我使用的NGUI版本为 v3.7.5,不知道老版的NGUI是否有UIWrapContent 这个脚本. 2.本文讲解主要以图片显示的例子为主,本文例子UIScrollView是水平方向,一 ...

  3. C++ Primer(6) 模板和泛型编程(上)

    问题聚焦: 泛型编程是独立于变量类型的方式编写代码: 模板是泛型编程的基础. 本篇主要介绍模板的基础知识,包括:模板的定义和模板的实例化. 1 模版定义 必要性: Demo int compare(c ...

  4. python错误和异常（1）

    1  SyntaxError: Python解释器语法错误,是唯一不是在运行时发生的异常. 2 检测和处理异常 try语句有两种主要形式:try-except 和 try-finally. 只能二选一 ...

  5. windows下sqli-labs的搭建及学习（POST篇）

    windows下sqli-labs的搭建及学习(GET篇): http://blog.csdn.net/sherlock17/article/details/64454449 Less-11:基于错误 ...

  6. Samba文件共享服务器配置

    Samba起源: 早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据,这样确实不太方便,于是便出现了NFS开源文件共享程序:NFS ...

  7. Mac下安装Spark

    1.Scala 官网下载scala安装包后解压,路径随意. 编辑/etc/bash_profile添加$SCALA_HOME并修改相应PATH 2.SSH无密码登陆 ssh-keygen -t rsa ...

  8. python中执行shell命令

    查看输出结果 import os output = os.popen('cat 6018_gap_5_predict/solusion2/solusion2_0-1.txt | wc -l') pri ...

  9. 2019.3.6 Github学习 &Git学习

    Github学习 1.使用Github 1.1 目的 借助github托管项目代码 1.2 基本概念 仓库(Repository) 仓库的意思是:即你的项目,你想在Github上开源一个项目,那就必须 ...

  10. DPI在SDN中的部署方式

    目录 在sdn中的部署分类 将DPI部署到基础设施层 将DPI部署到控制层 将DPI部署到应用层 个人总结 参考文献 在sdn中的部署分类 DPI 可以分别部署到SDN的基础设施层.控制层和应用层. ...