“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情”

一.开始vue的第一个程序

vue.js的cdn引入---里面具有完整的源码（不太常用）

<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>

vue.js的cdn引入---里面是压缩的代码（比较常用）

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

二.新建一个vue.js的项目

新建项目选择vue.js选项，写好项目名称

一进项目idea会自动加载需要的依赖

上述依赖加载完毕之后，项目会出现如下的目录

点击此处运行vue项目

初始化加载，稍等几秒即可，出现下面的网址就代表运行成功啦！

v-bind基本语法

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <title>my first vue program</title>
</head>

<body>

    <div id="app">
        <span v-bind:style="binding_message">{{real_message}}</span>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                binding_message: "color:red",
                real_message: "hello world"
            }
        })
    </script>

</body>

</html>

#进入工程目录
cd hello-vue
#安装vue-routern 
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启功测试
npm run dev

npm install moduleName：安装模块到项目目录下
npm install -g moduleName：-g是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置
npm install -save moduleName：–save是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
npm install -save-dev moduleName:–save-dev是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

属性绑定指令插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。

    再使用v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如 <div :title=" 'box' + index ">这是一个 div</div>

事件绑定指令

    vue 提供了v-on 事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。
    简写@事件名称
    例如： <button @click="add(1)">+1</button>

原文链接：blog.csdn.net/yjhfhfghg/a… “开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情”

开端---Vue

一.开始vue的第一个程序

二.新建一个vue.js的项目