vue的创建以及文本插值、属性绑定

一、创建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将会从渲染的元素上移除。