最近公司开发新的项目,前端框架选定vue,对于前端小白的我,须要本身学习补充能量。css
vue的最大特色:响应的数据绑定、组合的视图组件。html
vue文件里面包含三种:<template>html模板</template> <script>js</script> <style>css<style>前端
webpack 将vue的文件打包成浏览器能识别的 html(视图层)、js(就是一个vue对象,model数据层在这里)、cssvue
全局安装vue的环境:node
npm install -g vue-cli(能够在命令行vue命令)webpack
vue init webpack vueTest(建立一个基于webpack模板的vue的新项目,项目名称为:vueTest)web
npm install -d(将项目中package.json中的依赖的包下载到vueTest)vue-cli
npm run dev(启动环境,在package.json中的"scripts": "dev": "node build/dev-server.js",因此启动只须要npm run dev 就好,在浏览器中能够浏览该项目:http://localhost:8080)以下图所示:能够实时监控,当你修改了js,页面就会实时输出对应的内容npm
vue.js重要的组件:json
1:data:数据
2:method:方法
3:watch:监听
4:el:绑定的对象
vue的数据渲染:
三种形式:{{}}、v-text、v-html效果上没有多大的区别。
当Vue中的a发生变化,上面的a也会相对应发生变化,响应式的数据绑定。
经常使用的指令:
控制模块隐藏:v-if、v-show
渲染循环列表:v-for,就会循环出来两个qinbb、mmp
事件绑定:v-on(其中v-on:click和@click是同样的事件绑定)
属性绑定:v-bind,这个通常绑定的是class属性,因此v-bind会省略,其中imageSrc是字符串,第三个p中的classA和classB也是字符串,{red:isRed}这个是对象,is说明是个布尔值。
总结:
new一个vue对象,主要包含了三个重要的属性data(vue对象的数据至关于model)、method(vue对象的方法)、watch(vue对象的事件监听)
模板指令将视图层(html)和逻辑层(data)链接起来,经常使用的模板指令:
v-if(v-show):判断指令
v-text(v-html、{{}}):模板渲染
v-for:循环指令
v-on:事件绑定