当前位置:   article > 正文

2021-07-03_html双大括号语法

html双大括号语法

一、vue的安装和部署

二、创建第一个vue应用

创建vue对象,Vue()函数

三、 数据与方法

watch()方法,观察变量的变化,记录变量变化之前和变化之后的值。

四、生命周期

生命周期钩子函数不能使用箭头函数,因为要对this使用,而箭头函数是没有this的。
几种主要的钩子函数:

  1. beforeCreate在实例初始化之后,在数据观测和watch/event事件配置之前被调用。
  2. created在实例创建后立即被调用,此时实例已经完成数据观测(data observer),属性和方法的运算和watch/event事件回调,但此时挂载阶段还没开始,$el属性目前不可见。
  3. beforeMount在挂载之前被调用:相关渲染函数被首次调用。
  4. mounted,el被新创建的vm.$el替换,挂载成功。
  5. beforeUpdate数据更新时调用。
  6. updated组件dom已经更新,组件更新完毕。

五、模板语法

1.插值

插入变量的值。
形式:{{变量}}
使用v-once可以有一次性的插入,其后变量更新,插入后的值不改变。

2.原始HTML

双大括号{{变量}}只能将数据解释为普通文本,而非HTML代码。为输出真正的HTML,需要使用v-html指令。

rawHtml : '<span style="color:red">this is should be red</span>'

	//以双大括号形式1
	<p>Using mustaches: {{ rawHtml }}</p>
	//以v-html形式2
	<p v-html="rawHtml"></p>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

结果:
不同方法的结果

3.特性

使用v-bind:属性=“data中表示样式的数据”(属性指标签的属性,例如src,class等等),缩写:class=" “或者:src=” "。

4.使用JavaScript表达式

可以在模板语法中使用复杂的函数运算。

六、指令

带有v-前缀的特殊特性,具有响应式。
v-if=“变量” ,变量为真时显示。

指令的修饰符

以‘.’指明的特殊后缀,指出一个指令应以特殊的方式绑定,例如:
@click.stop中.stop可以在当前点击事件执行完后停下来。(更多请看第十条)

七、class与style的绑定v-bind

可以动态的改变标签的样式。
语法:(v-bind):class="{active:isActive}"
含义:名称为.active样式是否绑定在标签上取决于isActive的值,为真就绑定,为假就不绑定。与普通class属性可以共存,还可以绑定多个class属性。
改变内联样式:
:style=“width:200px;height:200px;”

八、v-if 条件渲染

新增v-else-if

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

v-show始终保持在页面上,只是通过改变css样式来改变是否在页面上显示。

九、v-for列表渲染

1.对数组的遍历

语法:item,index in items

各个表示:item是数组元素,可以取任何名字,只要符合命名规则;items是要渲染列表数组的名称,与数组名相同;in是固定的,不可改变;index表示数组元素的索引。

{{item}}即可遍历获得数组的内容。

2.对对象属性的遍历

语法:value,key in object

各个表示:value代表的是对象的属性的值,可以取任意名字,只要符合命名规则;object表示要遍历的对象,与对象名相同;key表示对应属性的名称。

{{value}}即可遍历获得对象的属性。

十、事件绑定,click=“函数”

常见事件修饰符

.stop:阻止单击事件继续传播,完成当前事件后就停止执行。
.prevent:提交事件不再重载页面。
修饰符可以串联,也可以只有修饰符。
.capture 添加事件监听器时使用事件捕获模式 ,即内部元素触发的事件先在此处理,然后才交由内部元素进行处理。

十一、表单输入双向绑定v-model

十二、组件基础Vue.component()函数创建新组建

自定义的元素,带有自己的名字。
语法:Vue.component(“自定义的名字”,对象)

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

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

代码效果图

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/174126
推荐阅读
相关标签
  

闽ICP备14008679号