自学Vue第一part

node -v/node --version均可检测nodeJS是否安装好

$ npm install --global vue-cli          全局安装vue-cli

$ vue init webpack my-project        创建一个基于webpack模板的项目

安装依赖

$ cd my-project

$ npm install

$ npm run dev

 

Vue    插入文本：<span>Message:{{msg}}</span>

                             <span v-once>只能显示一次;{{msg}}一次性定义后不再随值改变而改变

                   双大括号将数据解析为普通文本，v-html可输出真正的HTML代码

           v-bind  属性值不会被{{}}改变，值的内容被看成字符串，vue不会处理

                  v-bind：属性名=“表达式”，  与之相对应的v-model

           v-if  根据表达式的真假来插入/删除元素，直接从DOM树中删除

           v-show 是否在页面显示，设置display属性值

          v-on  监听DOM事件     

        动态参数（）

<a v-bind:[attributeName]="url"> ... </a>

                     注：有语法约束，如空格和引号，在HTML特性名中无效，可使用表达式规避

<a v-bind:[foo + bar]="value"> ... </a>

                         DOM中使用模板（直接在一个HTML文件里撰写模板），特性名强制转为小写

<a v-bind:[someAttr]="value"> ... </a>
v-bind:[someattr]` -->

        修饰符（modifier）eg..prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

        缩写：Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

            #v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

             #v-on缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>