小白的vue学习路程

vue

最近公司开发新的项目,前端框架选定vue,对于前端小白的我,需要自己学习补充能量。

vue的最大特点:响应的数据绑定、组合的视图组件。

vue文件里面包含三种:<template>html模板</template>  <script>js</script>  <style>css<style>

webpack 将vue的文件打包成浏览器能识别的 html(视图层)、js(就是一个vue对象,model数据层在这里)、css

全局安装vue的环境:

npm install -g vue-cli(可以在命令行vue命令)

vue init webpack vueTest(创建一个基于webpack模板的vue的新项目,项目名称为:vueTest)

npm install -d(将项目中package.json中的依赖的包下载到vueTest)

npm  run dev(启动环境,在package.json中的"scripts": "dev": "node build/dev-server.js",所以启动只需要npm run  dev  就好,在浏览器中可以浏览该项目:http://localhost:8080)如下图所示:可以实时监控,当你修改了js,页面就会实时输出对应的内容

 vue.js重要的组件:

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:事件绑定

以上是 小白的vue学习路程 的全部内容, 来源链接: utcz.com/z/374989.html

回到顶部