一、创建Vue项目
1、在终端中进入文件夹后输入 npm init vue@latest 创建Vue项目:
npm init vue@latest
2、依次输入以下命令:
cd vue-base
npm install
npm run dev
3、复制网页地址,在浏览器中进行显示。
二、文本插值
最基本的数据绑定形式是文本插值,它使用的是"Mustache"语法(即双大括号):
<template>
<div >{{msg}}</div>
</template>
<script>
export default {
data(){
return{
msg:"学习vue的第一天!"
}
}
}
</script>
注意:1、使用JavaScript表达式每个绑定仅支持单一表达式,要求有最终值。
2、双大括号将会将数据插值为纯文本,而不是HTML。若想插入HTML,你需要使用v-html指令:
<template>
<p>纯文本:{{ rawHtml }}</p>
<p>属性:<span v-html="rawHtml"></span></p>
</template>
<script>
export default {
data(){
return{
rawHtml : "<a href='https: //baidu.com '>百度</a>"
}
}
}
</script>
三、属性绑定
双大括号不能在HTML 属性 中使用。想要响应式地绑定一个attribute,应该使用v-bind指令:
<template>
<div v-bind:class="msg">测试</div>
</template>
<script>
export default {
data(){
return{
msg:"active"
}
}
}
</script>
v-bind指令指示vue将元素的id attribute与组件的 dynamicld 属性保持一致。如果绑定的值是 null或者undefined,那么该attribute将会从渲染的元素上移除。