做网站需要的企业,最新室内设计效果图,泰州网页制作,哪些网站是单页应用创建vue2项目
可能用到的命令行们
vue create 项目名称 // 创建项目
cd 项目名称 // 只有进入项目下#xff0c;才能运行
npm run serve // 运行项目
D: //切换盘符
cd .. // 返回到上一级目录
clear // 清空终端
更改 Vue项目的端口配置 基础语法
项目创建完成之后#…创建vue2项目
可能用到的命令行们
vue create 项目名称 // 创建项目
cd 项目名称 // 只有进入项目下才能运行
npm run serve // 运行项目
D: //切换盘符
cd .. // 返回到上一级目录
clear // 清空终端
更改 Vue项目的端口配置 基础语法
项目创建完成之后会有一个组件HelloWorld.vue这个组件是已经配置好的可以直接在上面写代码来运行。
首先vue分成三个板块 必不可少的就是template和script板块前者写HTML代码后者配置将组件导出需要的值。
{{属性值}}可以动态得到data中配置的属性值
使用v-on:xxx或 xxx 绑定事件,其中xxx是 事件名, 例如 click
methods中配置方法computed中配置计算属性也是写成一个方法的样子返回运算结果可以直接用{{方法名}}来执行
# v-model 用于收集表单数据“属性名”则该属性可以获取到表单组件的数据有三个修饰符—— lazy : 失去焦点再收集数据 number:输入字符串转为有效的数字 trim:过滤掉首尾输入的空格
条件渲染——
条件渲染有 v-if v-show# v-if
写法: v-if表达式v-else-if表达式v-else表达式
适用于: 切换频率较低的场景
特点: 不展示的DOM元素 直接被移除----------------------------# 注意 : v-if 可以和 v-else-if, v-else 一起使用,但要求结构不能被打断# v-show
写法:v-show表达式
适用于: 切换频率较高的场景
特点:不展示的DOM元素未被移除,仅仅是使用 display:none 隐藏掉--------------
# 注意:
使用v-if时 元素可能无法获取到,而使用v-show 一定可以获取到
template标签只能与v-if 配合使用
v-for列表渲染——
li v-foruser in userList :keyuser.id{{user.username}}--{{user.tel}}/li script中data(){}是比较特殊的一几乎只有data才会使用方法的方式其他都是属性的方式
templatediv classhelloh1{{ msg }}/h1h3姓名{{ name }}/h3!-- 插值语法 --h3学校{{ school }}/h3h3我要计算{{ count }}/h3input typenumber v-model.lazyadd /br /el-button typeprimary clickcal(10)Change Name/el-buttondiv{{ show }}/divdiv!--条件渲染if show v-if条件不成立不占位置v-show 条件不成立也占位置--p v-ifcheck(){{ name }} 你好/pp v-showcheck()counter is greater than 10/p/divdi列表渲染v-for/diulli v-for(item, index) in bankList :keyindex{{ item.bankName }}/li/ul/div
/templatescript
export default {name: HelloWorld, // 组件名称data() {return {name: 郑欣怡,school: 燕山大学,count: 0,add: 100,firstName: 郑,lastName: 欣怡~,questionList: [{ questioner: 玉米, experName: 张, id: 100 },{ questioner: 苹果, experName: 李, id: 200 },{ questioner: 香蕉, experName: 王, id: 102 },{ questioner: 苹果, experName: 李, id: 103 },],bankList: [{ bankName: 工商银行, bankCode: ICBC, bankAddress: 北京市朝阳区 },{ bankName: 建设银行, bankCode: CCB, bankAddress: 北京市海淀区 },{ bankName: 农业银行, bankCode: ABC, bankAddress: 北京市西城区 },{bankName: 邮政储蓄银行,bankCode: PSBC,bankAddress: 北京市通州区,},{ bankName: 招商银行, bankCode: CMB, bankAddress: 北京市顺义区 },{ bankName: 浦发银行, bankCode: SPDB, bankAddress: 北京市大兴区 },{ bankName: 兴业银行, bankCode: CIB, bankAddress: 北京市房山区 },{ bankName: 光大银行, bankCode: CEB, bankAddress: 北京市密云区 },],};},props: {// 接收父组件传递的属性msg: String,},// 事件处理methods: {changeName() {this.count;if (this.count % 2 0) {this.name 韩梅梅;} else {this.name 郑欣怡;}},cal(num) {this.count num;// this.count this.add;},check() {// alert(check this.count);return this.count 10;},},computed: {// 计算属性show() {return this.firstName this.lastName;},},
};
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
/* 当前样式只对当前页面有效 */
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/style组件化开发 # Vue中使用组件的三大步骤 一 定义组件(创建组件) 二 注册组件 三 使用组件(写组件标签)
在App.vue中注册组件
import HelloWorld from ./components/HelloWorld.vueimport MyVue from ./components/My.vueexport default {name: App,components: {HelloWorld,MyVue}}
在App.vue中使用组件
templatediv idappimg altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App/
!--使用自定义的组件--NewVue/hello-vue/FormVue//div
/template
导入ElementUI
使用ElementUI中的css渲染让网站中的组件更加美观。
Element - The worlds most popular Vue UI framework
网站中包含了大量样式可以直接得到样式的代码复制到自己的项目中前提是还得将Element UI装入项目
命令行执行
npm i element-ui -S
在main.js中配置
import Vue from vue
import App from ./App.vue
import ElementUI from element-ui;//样式文件需要单独引入
import element-ui/lib/theme-chalk/index.css;
Vue.use(ElementUI);Vue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)
