时间：2023-06-06 23:57:02 | 来源：网站运营
时间：2023-06-06 23:57:02 来源：网站运营
Vue-模板template：
在线咨询
// html文件<div id=xxx>{{n}}<button @click="add">+1</button></div>二、Vue完整版，写在选项里new Vue({ template: ` <div> {{n}} <button @click="add">+1</button> </div>`, data:{n:0}, // data methods:{add(){ this.n += 1 }}}).$mount('#app')注意：div#app 会被取代// xxx.vue<template> <div> {{n}} <button @click="add">+1</button> </div></template><script> export default { data(){ return {n:0} }, // data 必须为函数 methods:{add(){ this.n += 1 }} }</script><style>这里写 CSS </style>// js文件import Xxx from './xxx.vue'new Vue({ render: h => h(Xxx)}).$mount('#app')注意：这里的template里面的不是html语法，而是xml语法{{object.a}} 表达式{{ n+1 }} 可以写任何运算{{ fn(n) }} 可以调用函数如果值为undefined 或 null 就不显示另一种写法是 <div v-text="表达式"></div> 很少用假设 data.x 值为 <strong>hi</strong><div v-html="x"></div> 就可以显示粗体的hi使用v-html动态渲染的任意 HTML 可能会非常危险，因为它很容易导致XSS 攻击。只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。<div v-pre>{{ n }}</div>// v-pre 不会对模板进行编译// 绑定src<img v-bind:src="x" />// 简写成<img :src="x" />// 绑定对象<div :style="{width: 100}"></div>// 注意这里100默认是100px，不写px也可以，如果是em，就需要写上'100em'<button v-on:click="add">+1</button>// 点击之后，Vue会运行 add()<button v-on:click="xxx(1)">xxx</button>// 点击之后，Vue会运行 xxx(1)<button v-on:click="n+=1">xxx</button>// 点击之后，Vue会运行 n+=1缩写：<button @click="n+=1">xxx</button>，正常人都用缩写<div v-if="x > 0"> x 大于 0 </div><div v-else-if="x === 0"> x 等于 0 </div><div v-else="x < 0"> x 小于 0 </div>// 数组<ul> <li v-for="(u, index) in users" :key="index"> 索引： {{index}} 值：{{u.name}} </li></ul>// 对象<ul> <li v-for="(value, name) in obj" :key="name"> 属性名： {{name}} 属性值：{{value}} </li></ul>:key="index"有bug，后面补充<div v-show="n % 2 === 0">n是偶数</div>近似等于<div :style="{display:n%2===0?'block':'none'}"> n是偶数 </div>看得见的元素display不只有block，如table 的 display 为table，li 的 display 为list-item[v-cloak] { display: none;}<div v-cloak> {{ message }} </div>不会显示，直到编译结束。.{keycode|keyAlias }2、v-bind：
.stop
.prevent
.capture .self .once .passive .native
快捷键：.ctrl .alt .shift .meta .exact
鼠标：.left .right .middle
.prop3、v-model：
.camel
.sync
.lazy加粗的重点学习
.number
.trim
// App.vue<template> <div class="app"> App.vue 我现在有 {{total}} <hr> <Child :money="total" v-on:update:money="total = $event"/> // 监听并更新money </div></template><script>import Child from "./Child.vue";export default { data() { return { total: 10000 }; }, components: { Child: Child }};</script><style></style>// Child.vue<template> <div class="child"> {{money}} <button @click="$emit('update:money', money-100)"> // 对父组件的money赋新值 <span>花钱</span> </button> </div></template><script>export default { props: ["money"]};</script><style></style>代码中 <Child :money="total" v-on:update:money="total = $event"/>关键词：模板
