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. August 25th 2017 Week 34th Friday

    Stop to have a rest, do not forget others still in the running. 停下来休息的时候,不要忘记别人还在奔跑. You don't need ...

  2. December 30th 2016 Week 53rd Friday

    Life without love is like a tree without blossoms or fruit. 缺少爱的生活就像从未开花结果的枯树. Love is not only the ...

  3. python的sys和os模块

    一.sys sys.argv:实现从程序外部向程序传递参数.  其中sys.argv[0]为脚本的名称,所以要判断是否有参数传入可以:if len(sys.argv) > 1.  sys.exi ...

  4. python Queue在两个地方

    其一: Source code: Lib/queue.py The queue module implements multi-producer, multi-consumer queues. It ...

  5. SOJ 4309 Sum of xor 异或/思维

    Source ftiasch 解题思路: 本题的题解有参考这里,但是那篇年代太久远,讲的也不甚清晰,所以可能会对很多新手造成困扰,所以又写了这一篇. 亦或有很多规律,本题使用到的是n^(n+1)=1, ...

  6. leetcode shell

    leetcode 195. 第十行 # | | 第一种是先取出前10行,然后取出最后一行.(但是不足10行,也可以取出最后一行) 正解: tail -n +K :从第K行取出所有 然后取出第一行 le ...

  7. mysql 数据增删改查基本语句

    增: insert insert into 表名(字段1,字段2,字段3......字段N) values(值1,值2,值3): 如果不申明插入那些字段,则默认所有字段. 如果一次可以插入多条数据 可 ...

  8. 9、RabbitMQ-集成Spring

    spring封装RabbitMQ看官网:https://spring.io/projects/spring-amqp#learn 开发时根据官网的介绍进行开发,具体的说明都有具体的声明 1.导入依赖 ...

  9. 一款不错的网站压力测试工具webbench

    webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装: 引用 wget htt ...

  10. keras写模型时遇到的典型问题,也是最基础的类与对象问题

    自己定义了一个卷积类,现在需要把卷积加入model中,我的操作是这样的: model.add(Convolution1dLayer) 这样就会报错: 正确的写法是: model.add(Convolu ...