标签：vue 变量 插值 js 学习 Vue 参数 data

vue=view

下载：

1.开发版本【开发者在进行开发时使用，体积较大，但功能较多】：https://cn.vuejs.org/js/vue.js

2.生产版本【生产者在开发完毕后，打包给用户使用，体积小且能保留主要功能】：https://cn.vuejs.org/js/vue.min.js

3.在线引用：https://cdn.jsdelivr.net/npm/vue/dist/vue.js。

引入

引入方法在html中均为使用script标签：

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

引入后在html中便存在一个vue变量。

创建简单demo

1.变量插值：使用双大括弧来表示——{{变量}}，如下a就是一个插值变量，后续可在script中进行交互。

<div id="app">
	{{a}}
</div>

2.Vue变量实例化：如下（在script标签中）为实例化一个Vue变量。输入的参数为el—元素的id或者class，此处使用的是id，用#，如果为class，则使用点，从而实现vue变量与标签的绑定；data参数为声明或赋值变量，该变量是绑定的标签下存在的插值。

var app = new Vue({
		el: '#app',
		data: {
			a: 'Hello Vue!'
		}
	});

数据与实例

重述上述2中内容。既vue实例化后对象存在原有变量、方法和用户变量，为了区别原有变量与用户变量，使用$符号来进行区别：

【回调函数：回调函数是作为参数传递给另一个函数的函数，然后在外部函数内部调用该回调函数以完成某种例程或操作，简而言之就是函数的函数参数】

html标签中代码：

<div id="app">
	{{a}}--{{b}}
</div>

js中代码，使用了$符号（不加也不影响使用）的是原有变量，而没有使用则为用户变量：

var data = { a : 1,b : 2 };
var vm = new Vue({
	el   : "#app",
	data : data
});
vm.$data.a = "test";
vm.b = "notest";

 

如在上述代码中使用Object.freeze(data)【把该变量冻结了】，则会组织系统追踪变化，页面不显示任何内容。

观察vue变量的方法使用watch，该方法可以监视最新值与最旧值，第一个参数为变量名，第二个参数为回调函数，回调函数的参数为返回的最新值与最旧值：

vm.$watch('a', function(newVal, oldVal){
	console.log(newVal, oldVal);
})

生命周期

【生命周期钩子】——实例化过程中有许多过程，整个过程加起来就是一个生命周期，在不同生命周期阶段用户可以添加自己的函数，添加过程则必须使用生命周期钩子。

以下示例介绍了基本的几个钩子，具体参考：https://cn.vuejs.org/v2/api/#beforeCreate

 

var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});

插值与指令

使用双大括号进行插值，插值包括变量插值与表达式插值；指令的功能之一便是对插值变量进行相关属性设置。

使用v-once指令可以使得插值变量的值可且仅被修改一次。

使用v-html指令可以使得插值变量被编译为html语言。

使用v-bind指令可以动态设置标签属性。

<div id="app" v-once>
	{{a}}
</div>

 

<p v-html="rawHtml"></p>



var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
		rawHtml : '<span style="color:red">this is should be red</span>',//v-html的变量绑定并赋值
		color:'blue',
		number : 10,
		ok : 1,
		message : "vue"
	}
});

<div v-bind:class="color">test...</div>




var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
		rawHtml : '<span style="color:red">this is should be red</span>',
		color:'blue',//对color进行赋值，color在网页代码中显示为blue
		number : 10,
		ok : 1,
		message : "vue"
	}
});



.blue{color:blue; font-size:100px;}//设置blue内容

 

	<p>{{ number + 1 }}</p>
	<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>//？之前的是一个判断表达式，如果真则执行？后的，如果假则执行：后的
	<p>{{ message.split('').reverse().join('') }}</p>
//插入表达式

指令

使用v-xxx来进行指定，目的为动态的对控制dom或对dom内的插值变量控制，在原始html中不会显示v-xx。分为直接赋值（=）、参数（：x=xx）、动态参数

 【v-if】——<p v-if="seen">现在你看到我了</p>——此处seen是一个变量，用双引号来包住，通过在vue初始化过程中对其赋值从而动态控制seen的值。

v-if后的值为真则渲染该DOM，否则不渲染该绑定的DOM。

 【v-bind（可省略直接使用：）】——<a v-bind:href="url">...</a>——v-bind:参数=变量名【在html中显示】，如果url="www.hao123.com"，则最终在html中显示为<a href="www.hao123.com">...</a>

使用中括号可以设置“参数”变量，既将上述的herf也当作一个变量，在data可对其进行赋值。如——<a v-bind:[attributeName]="url"> ... </a>，如果在data下有一个attributeName："src"，则最终结果为<a src="url"> ... </a>。

【v-on：= @ 】——<a v-on:click="doSomething">...</a>——v-on:参数=变量名【在html中均不显示】，只不过此处的参数通常为监听的事件名，dosomething通常为回调函数名称，在初始化的methods下写入。

<div @click="click1">
		<div @click.stop="click2">
			click me
		</div>
</div>

//click代码嵌套时候，只要点击clickme，那么两层嵌套都将处罚，如果想只触发一层，则使用@click.stop。

 

 class与style绑定【普通是变量，键值对后面是变量】

 【对象语法】：我们可以传给 v-bind:class 一个字典对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

//""代表的是一个键值对的变量，active是具体类名，其存在与否取决于isActive

 该字典对象中也可存在多个键值对，且该指令类可与普通类同时作用与DOM。

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>


data: {
  isActive: true,
  hasError: false
}

-->>  <div class="static active"></div>

 【数组语法】给v-bind:class=“[]”输入的参数为一个数组，数组内的变量任然是由data内变量值决定，这是静态参数；动态参数的话可以采用数组嵌套字典来进行设置。

<div v-bind:class="[activeClass, errorClass]"></div>//静态参数
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
<div v-bind:class="[{ active: isActive }, errorClass]"></div>//动态参数

同理可应用于style，style后是字典。

条件渲染

 【v-if】正真的条件渲染

【v-else】

【v-else-if】

【v-show】惰性条件渲染，始终渲染但使用css进行隐藏

	<div v-if="type === 'A'">
	  A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
//type通过修改data中值
<h1 v-show="ok">Hello!</h1>
//h1显示与否取决于ok变量的值，也可以是一个表达式

 列表渲染

 【v-for】类似于python的for语句，数组依次返回个体值，索引；字典依次返回值，键，索引。

<li v-for="item,index in items">
		{{index}}{{ item.message }}
</li>

<li v-for="value, key in object">
		{{key}} : {{ value }}
</li>


data : {
	items : [
		{ message: 'Foo' },
		{ message: 'Bar' }
	],
	object: {
		title: 'How to do lists in Vue',
		author: 'Jane Doe',
		publishedAt: '2016-04-10'
	}
}

 

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key attribute：

<div v-for="item，index in items" v-bind:key="index">
  <!-- 内容 -->
</div>

 事件绑定

@click=“回调函数”。获取DOM事件时可用$event特殊变量进行获取（一般默认如果没有对其赋值就是一个响应事件变量）

<button v-on:dblclick="greet('abc', $event)">Greet</button>
//此处传入的$event就是响应对象

 事件修饰符——修饰事件绑定如修饰click的有。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

表单输入与绑定

【v-model=变量】该变量就是与空间绑定的变量

记住这个例子：

<input v-model="searchText">

等价于

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

1.获取事件响应的抛出值     2.将抛出值值赋值给自定义变量（用于后续在vue中写入方法）  3.将抛出值赋值给input的属性

【v-model】 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

<input v-model="message" placeholder="edit me">//placeholder是代表占位符
<p>Message is: {{ message }}</p>


<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
//调用了input事件并跟踪了value的值

 

<div style="margin-top:20px;">
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label> // for 属性规定 label 与哪个表单元素绑定。 作用是 在点击label 时会自动将焦点移动到绑定的元素上
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<br>
			<span>Checked names: {{ checkedNames }}</span>
</div>
//复选框

 

		<div style="margin-top:20px;">
			<input type="radio" id="one" value="One" v-model="picked">
			<label for="one">One</label>
			<br>
			<input type="radio" id="two" value="Two" v-model="picked">
			<label for="two">Two</label>
			<br>
			<span>Picked: {{ picked }}</span>
		</div>
//单选框

 组件基础

 使用Vue.component()定义组件，第一个参数为组件名称，第二个参数为数据，第三个参数为template也就是模板。实质上是具有特定功能的众多控件的集合，多个控件需要用div包裹。其可复用。

 

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

 Vue.component('my-component-name', { // ... options ... })全局进行注册

在option中包括

• prop：[a,b,c,d]——自定义的组件的属性，类似于标签的属性一样。
• data——提供数据，必须以函数形式书写
• template——模板数据，只能使用一个根模板
• method——提供方法

监听子组件事件——自定义模板的响应名称与抛出值

 

	<button-counter title="title1 : " @clicknow="fun1($event)">//父组件
		<h2>hi...h2</h2>
	</button-counter>


Vue.component('button-counter', {
	props: ['title'],
	data: function () {
		return {
		  count: 0
		}
	},
	template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
	methods:{
		clickfun : function () {
			this.count ++;
			this.$emit('clicknow', this.count);
		}
	}
})
//基于原始的onclick事件，执行clickfun函数；
//在methods中重写clickfun函数
//使用this.$emit()进行自定义组件事件，其中第一个参数为事件名称，第二个参数为抛出数值。
//如果没有this.count ++等需求，则可以直接写作：@:click=$emit('clicknow',count)
//父组件可以使用@clicknow="fun1($event)【此处省略$event也可以，默认为回调函数第一个参数为$event】来对抛出数值进行访问

 插槽分发内容

<alert-box>
  Something bad happened.
</alert-box>
报错，写成这样即可
Vue.component('alert-box', {
  template: 
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
})

 

 

 

 

标签：vue,变量,插值,js,学习,Vue,参数,data
来源： https://blog.csdn.net/qq_43391694/article/details/114159199

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。