博主微信:jiayou321xiaoyu 加微信,备注:前端Tree

vue学习笔记总结基础知识(一)持续更新…

vue框架 admin 162℃ 0评论

一 、vue的基本使用

在学习vue之前我们必须先了解node的npm的使用,这个我们就不做笔记了

1、安装:安装:npm i vue

2、引入 vue.js

3、创建Vue实例  下main的vm就是vue实例

4、const vm = new Vue({})

5、解读vue实例内容

const vm = new Vue({

// element 元素的简写
// 作用:用来指定Vue管理的边界,也就是让 Vue 管理页面中的哪块内容
el: ‘#app’,
// 作用:指定数据,值为:{}
// data中的数据,可以直接在 View(视图) 中使用
data: {
msg: ‘Hello Vue’
}
})

二、vue的数据调用

vue把数据放在data : {}中,data中的数据是以对象或者数组的形式存放

const vm = new Vue({
// el: ‘#app’,
el: ‘body’,
data: {
txt: ‘Hello Vue’
}
})

我们在实例中声明了数据之后 就可以在html中使用了,我们必须使用插值表达式的方法使用数据,而且必须在vue的管理边界内使用

<div id=”app”>

<p>{{ txt }}</p>

<!– 错误:使用了未声明的数据!!!! –>
<!– <p>{{ msg }}</p> –>
</div>

三、解读 {{}}

{{}}  这个插值表达式  在里面可以使用任意形式的js表达式,,

注意一点是 :插值表达式不能出现在Html属性中,因为html属性有自己独立的语法表示。同样的也不能出现在语句中。

举例说明 :

<!– {{}} 可以使用任意的 JS 表达式 –>
<p>{{ 1 }}</p>
<p>{{ ‘a’ }}</p>
<p>{{ [‘a’, ‘b’] }}</p>
<p>{{ 3 > 5 ? ‘大于’ : ‘小于’ }}</p>
<p>{{ [‘a’, ‘b’].join(‘—-‘) }}</p>

错误使用法 :不能出现在Html属性中

<!– <a href=”{{ txt }}”></a> –>

注意: {{}} 中不能出现语句

  <!– <p>{{ if (true) { console.log(‘aaaa’) } }}</p> –>
<!– <p>{{ for (var i = 0; ….) { console.log(‘aaaa’) } }}</p> –>

 

 

 

 

 

 

 

 

 

转载请注明:前端Tree » vue学习笔记总结基础知识(一)持续更新…

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址