标签:样式表 传值 rip 事件 组件 鼠标 list 映射 编译过程
常用插件:live server ESLint vetur
一.准备工作
1. 安装cnpm;安装webpack;安装webpack-cli;安装vue/cli
安装node.js
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g @vue/cli // @vue/cli为新版本 vue-cli为老版本 卸载老版本的命令 npm uninstall vue-cli -g
2.安装webpack
npm install webpack -g
npm install webpack-cli -g
3.创建项目:
vue create vuecore //可以cd到项目里,运行 cnpm install安装依赖
4.运行项目
npm run serve
5.安装webpack
1.cnpm i webpack webpack-cli --save
2.再根目录添加webpack.config.js 配置打包模式
5.安装 配置cssloader
cnpm i css-loader style-loader --save
5.自动按需引入组件 (推荐)
-
- babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
- # 安装插件 `npm i babel-plugin-import -D`
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
[‘import‘, {
libraryName: ‘vant‘,
libraryDirectory: ‘es‘,
style: true
}, ‘vant‘]
]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from ‘vant‘;
二.绑定属性
1.绑定属性
<div v-bind:title="title">放上鼠标显示<div> v-bind:简写: <div :title="title">放上鼠标显示<div> title在data里定义,data里的数据用‘‘ 单引号阔气了
:src="url"
:class
:title
2.绑定Html
<div v-html="content"></div>
<div v-text="content"></div>
3.绑定样式:可以进行判断
<div :class="{‘red‘:flag}"> 你好</div> //在样式表定义red
<div :class="{‘red‘:flag,‘blue‘:!flag}"> 你好</div> //只有真假,不是0 1
还有:style
4.循环
<li v-for="item in list"> {{item}}</li> <li v-for="(item,key) in list">{{key}} {{item}}</li>
<li v-for="(item,key) in list" :class="{‘red‘:key==0}">{{key}} {{item}}</li> //第一行class="red"
三.双向数据绑定
1.针对表单元素 绑定关键词 v-model=‘xx‘
3获取vue的dom节点
节点添加标识 ref="" 如userinfo 获取DOM节点 this.$refs.userinfo
获取DOM节点的值 this.$refs.userinfo.value
四.事件与方法
1.点击事件与方法 v-on 简写@ ,方法内容放在methods里面.
2.方法与方法之间用,隔开
3.添加数据用push 如给数组list添加数据 ,this.list.push(‘xxxxx‘) ,删除数据:this.list.splice(index,1) 删除数组开始的下标,删除1个
4.执行方法传值: 如1.@click="xx(a)" 2.方法()添加形参,3.方法内得到参数.
5.事件对象 @click="eventFn($event)" 定义对象(方法) eventFn(e) ,,,e.xx.xx
四.TudoList
安装: npm install vue-router --save 导入并使用: import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ Vue.use(VueRouter)
给组件配置路由功能:如再main.js 配置。
// 1. 导入组件
// 2.给组件配置路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器, const routes = [
// 3.实例化路由
// 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写) 相当于 routes: routes
// 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount(‘#app‘) // 现在,应用已经启动了!
根目录App.vue 可配置
<router-link to="/home">home</router-link> <router-link to="/news">news</router-link> <router-view></router-view>
路由传递参数
{ path: ‘/Content/:id‘, component: Content }, //对应this.$route.params 如需要访问/Content/ 需要单独添加一个路由。
{ path: ‘/PContent‘, component: PContent }, //对应this.$route.query 路径/PContent可以访问,同时,可以用?id=xx传递参数
标签:样式表 传值 rip 事件 组件 鼠标 list 映射 编译过程
原文地址:https://www.cnblogs.com/dxh0535/p/12275552.html