Vue.js从入门到实践学习笔记(一)——Vue.js语法简介
一、Vue实例
在一个使用Vue.js框架的页面应用程序中,至少要创建一个Vue实例。语法为new Vue()
。
创建Vue实例时,需要传入一个选项对象,传在()里,({…}),该对象可以包含数据、方法、组件生命周期钩子。
提示:实例可以赋值给变量,如:var vm = new vue({......})
实例挂载:通过el属性绑定要渲染的view,el: ‘#app’
表示该实例挂载到前面的HTML标签语句中。
data:{...}
数据对象,放所有的数据vm.$mount("#app")
方法手动挂载Vue实例 ,返回实例本身- el是在()里挂载,
$mount
是在()外挂载
var vm=new Vue({
...}).$mount("app")
二、插值(数据绑定)
1、模板文本中的绑定
对于<html>
里的标签之间的文本值,需要调用写在<script>
里的实例里的属性值,使用文本插值,即Mustache语法(双花括号):<p>{
{message}}</p>
- 如果值是一段HTML代码,{
{HTML}}并不会执行这段HTML代码,只会原样输出(顾名思义,文本插值,只传递文本进去):
<p>{ {html}}</p>
- 使用v-html指令可以输出执行HTML语句后的结果:
<p v-html="html"></p>
2、HTML元素属性值的绑定
对于HTML元素的属性值,也即标签的属性值,如<a href=?>{
{...}}</a>
,?处不能用{
{}},要传值的话需要使用v-bind指令:
<a v-bind:href="url">{
{
...}}</a>`
对所有的数据绑定,提供完全的JavaScript支持,如:
<p>{
{
message.tuUpperCase()}}</p> //tuUpperCase()会把传进来的文本变为全大写字母。
{
{
a+b}}
{
{
isLogin?username:‘not login’}}
{
{
message.split(' ').reverse().join('')}} //反转句子
<div v-bind:id="'list-' + id"></div>·
这些表达式会先在Vue实例的数据作用域下作为JavaScript被解析。
注意:每个表达式只能包含单个表达式,不能是语句或if语句,如:
{
{
var a = 1}} //这是语句,不是表达式
{
{
if (OK) {
return message} }} //if语句也不会生效,可以用三元表达式来代替
三、指令
指令是带有v-前缀的特殊属性,其值限定为单个表达式(可以是值,也可以支持JavaScript表达式)。
当<script>
中Vue实例里的属性值发生改变,<html>
中与之绑定的标签的属性值也会跟着改变。
1、一些常用指令及用法:
v-if指令
<p v-if = "show">能看到吗</p> //v-if指令将根据show的值的真假来决定是否显示<p>的文本
一些指令可以带有参数,在名称后用冒号表示,如:
v-bind指令
<a v-bind:herf= "url"></a> //用于响应式地更新HTML属性
<a :herf= "url"></a> //简写
v-on指令
<button v-on:click="sayGreat"></button> //用于监听DOM事件
<button @click="sayGreat"></button> //简写
2、指令的参数可以是动态参数
从Vue.js 2.6.0版本开始,指令的参数可以是动态参数,语法为 指令:[JavaScript表达式],如:
<a v-bind:[attribute]= "url"></a>
attribute会被作为一个JavaScript表达式进行动态求值。假设在Vue实例中有一个对象属性为attribute,值为href,就相当于v-bind:herf;若值为null,绑定就会被移除,相当于
<a></a>
注意1:在DOM中使用模板时(之间在HTML文件里写模板),需要避免使用大写字符命名动态参数,因为浏览器会把元素的属性名全部强制转换为小写。
也就是<html>里的动态参数名改成小写了,但是<script>里与之对应的名不会改成小写,就会找不到动态参数对应的数据对象。
注意2:动态参数不要使用复杂的表达式。因为HTML元素的属性命名有规范,不能有引号或空格。
错误示范:<a v-bind:['foo' + bar]= "value"></a>