Vue

约 885 字大约 3 分钟

2024-03-16

组件属性详解

new Vue({ el: '#app', //绑定的dom data: { dom中可以的属性 msg: "data属性" }, methods: { 自定义的方法 Personal:function () { console.log("methods方法存放方法") }, download:function(){ } }, template: <div>模板的第二种使用方法2</div>, //模板，模式是使用el中的dom render: (createElement) => { return createElement("h1",{"class":"类名"，"style":"color: red"},"这一个render属性创建的虚拟dom") }, })

- el : 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，不能挂在在html、body标签 建议ID
- data : 实例的数据对象
- template : 模板将会 替换 挂载的元素。挂载元素的内容都将被忽略
- method : 声明的方法，可以在实例中直接方法， 不能用箭头函数来定义
- computed : 计算函数，声明的属性可随依赖属性的改变而改变
- watch：监听
- props：可以是数组或对象，用于接收父类传递的数据

属性绑定 v-bind:title == ：title title的值不需要加{

- :for="['file-'+index]"  拼接

事件绑定 v-on:click == @click razor中需要@@

dom属性指令

- v-text：dom属性 不转义 可以直接关联data内 值可以直接+'' 拼接
- v-html：转义
- v-on：绑定事件 v-on:事件名="方法名" 简写@事件名
- v-show：bool值决定是否显示dispaly， 可直接写比较
- v-if：组件是否渲染，bool决定是否创建或移除（销毁）不推荐同时使用 v-if 和 v-for当一起使用时，v-for 具有比 v-if 更高的优先级。
- v-model 双向绑定值
- v-for="todo in todos"
- v-bind:属性=""： 简写：属性名
- v-text 输出渲染后的值

-v-html 输出解析HTML元素后的值

- v-if 条件判断  

- v-else-if

- v-else

- v-for 循环

- v-model 表单双向数据绑定

- v-show 控制元素显示与隐藏

- v-bind 绑定元素的属性和style

- v-on 绑定事件

- v-pre 原样输出

- v-cloak 渲染完之后才显示，防止将类似的输出到页面

- v-once 只渲染一次

Vue-Awesome-Swiper基本能解决你所有的轮播需求

Hiper：一款性能分析工具

脚手架

安装命令

# 安装、创建项目
npm install -g vue-cli
vue init webpack-simple nama

# 生成运行项目
npm install
npm run dev

npm uninstall -g @amap/amap-jsapi-loader








```vue
<template>
 <view>
   <view>{{ number + 1 }}</view>
   <view>{{ ok ? 'YES' : 'NO' }}</view>
   <!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
   <view>{{ message.split('').reverse().join('') }}</view>
 </view>
</template>
<script>
export default {
 data() {
   return {
     number:1,
     ok:true,
     message: 'Hello Vue!'
   }
 }
}
</script>

<template>
<view>
   <view v-for="(item,index) in 10">
   <!-- 通过%运算符求余数，实现隔行换色的效果 -->
   <view :class="'list-' + index%2">{{index%2}}</view>
 </view>
</view>
</template>
<script>
export default {
 data() {
   return { }
 }
}
</script>
<style>
.list-0{
 background-color: #aaaaff;
}
.list-1{
 background-color: #ffaa7f;
}
</style>

Vue-CLI

自动构建转换成浏览器识别的htmlcssjs。
安装 cnpm install -g @vue/cli Vue CLI 4.5以下，对应的是Vue2 Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2

 //打包发布 
	const { defineConfig } = require("@vue/cli-service");
		module.exports = defineConfig({
	  		transpileDependencies: true,
	  		publicPath: "./",
	});

vue调试工具 vue-devtools 浏览器插件

升级插件

方法一： - 1、手动修改 package.json 中的 vxe-table 框架版本，手动修改为 3.0.22 版本 - 2、在命令行中重新执行一遍 npm install 即可。方法二、 - 在命令行中执行 npm install --save vxe-table 重新安装最新的版本