vue的基础

vue

构建脚手架应用

npm install vue-cli -g

vue init webpack 《temple-name》项目名

模板名：webpack pwa simple webpack-simple browerify browerify-simple

cd 项目名

npm install 安装项目依赖

npm run dev 执行项目文件

依赖的环境 node =》 npm

vue 的脚手架 搭建好的一个工程

npm install vue-cli -g 安装脚手架

vue是什么？  view  视图

是一套用于构建用户界面的渐进式框架；

渐进式？

由底层向上开发

vue的特点？

mvvm     m model  模型     v view 视图     vm 数据交互的过程

简洁 

组件化

模块化

双向数据绑定

vue 的应用场景？

构建单页面应用  

webpack  hotupdate  热更新   不用刷新直接显示数据

index.html 主文件   main.js   index.js   app.vue   helloword.vue

创建vue项目

vue init webpack project(项目名称）

下载好后，安装依赖，启动运行http://localhost：8080端口

OK成功界面

template 支持根元素，否则error；

< template >

hello word

</ template >

< script ></ script >

< style ></ style >

正常template

< template >

< div >

hello word

< div >

hellow vue </ div >

</ div >

</ template >

< script ></ script >

< style ></ style >

单个div,支持一个根元素

< template >

< div >hello word </ div >

</ template >

< script ></ script >

< style ></ style >

根元素只支持一个，多余error；

< template >

< div >hello word </ div >

< div >vue </ div >

</ template >

< script ></ script >

< style ></ style >

指令：

v-model   双向数据绑定

v-for:循环

< template >

< div id= "app" class= "app" >

<!-- 双向数据绑定 -->

<!-- <input type="text" v-model="title"/>

{{title}} -->

< div v-for="( item, index) in arr" >{{ index}}{{ item}} </ div >

< div v-for="( item, index) of arr" >{{ index}}{{ item}} </ div >

</ div >

</ template >

< script >

export default {

name: 'App',

data(){

return{

title: 'hellow vue',

arr:[ '1', '2', '3', '4']

}

}

}

</ script >

< style >

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</ style >

v-if 和 v-show的 区别？

v-show显示隐藏

是否对DOM节点进行删除操作；

v-else 元素必须紧跟在 v-if 或 v-show 元素的后面——否则它不能被识别。 

v-text 文本

v-html 解析标签

v-bind:  动态绑定 class   style   href  src