随笔分类 - vue
vue
摘要：v-cloak指令 用于隐藏 未编译的模版闪取 用户可以看到dom元素的大括号 v-pre指令 不编译dom v-once 指令 只编译一次，后面不编译
阅读全文
摘要：插值表达式 <div>{{msg}}www.96net.com.cn</div> 结果不会替换标签里面的内容 vue指令v-text <div v-text="msg">www.96net.com.cn</div> 结果会替换标签里面的内容
阅读全文
摘要：<script> export default { data(){ return{ message:0, put1:'96net.com.cn', } }, methods:{ dianji(p,event){ console.log(p); console.log(event); } } } </
阅读全文
摘要：<script> export default { data(){ return{ message:0, put1:'www.96net.com.cn', } }, methods:{ dianji(e){ console.log(e); } } } </script> <template> <di
阅读全文
摘要：<script> export default { data(){ return{ message:0, put1:'www.96net.com.cn', } }, methods:{ dianji(p){ this.message++; console.log(p); } } } </script
阅读全文
摘要：一，import import HelloWorld from './components/HelloWorld.vue' import TheWelcome from './components/TheWelcome.vue' import * as ss from './assets/expor
阅读全文
摘要：父组件 <script> import { computed, provide, watch } from 'vue' import {ref,reactive,toRefs} from 'vue' import Children from './components/children.vue';
阅读全文
摘要：ref + 普通dom标签 获取真实dom对象 ref + 组件标签 获取组件实例对象 <template> <h1 ref="h1Ref">www.96net.com.cn</h1> <ref-comoonent ref="comRef"></ref-comoonent> </template>
阅读全文
摘要：父组件 <script> import { computed, provide, watch } from 'vue' import {ref,reactive,toRefs} from 'vue' import father from './components/father.vue' expor
阅读全文
摘要：<script> import { computed, watch } from 'vue'; import {ref,reactive,toRefs} from 'vue' export default{ setup(){ let data=reactive({ mes:6, userObj:{
阅读全文
摘要：<script> import { computed } from '@vue/reactivity'; import {ref,reactive,toRefs} from 'vue' export default{ setup(){ let data=reactive({ mes:6, userO
阅读全文
摘要：<script> import {ref,reactive,toRefs} from 'vue' export default{ setup(){ let data=reactive({ mes:0, userObj:{ userName:'www.96net.com.cn' }, }); cons
阅读全文
摘要：<script> import {reactive} from 'vue' export default{ setup(){ let data=reactive({ mes:0 }); const add=()=>{ //console.log('//1555'); data.mes++; cons
阅读全文
摘要：<script> import {ref} from 'vue' export default{ setup(){ let mes=ref(1); const add=()=>{ //console.log('//1555'); mes.value++; //console.log(mes) } r
阅读全文
摘要：1,href属性 <body> <p class="app"> <a v-bind:href="url">点我</a> </p> <script> var app = new Vue({ el:'.app', data:{ url:"www.gzsmbj.com", } }); </script><
阅读全文
摘要：<div id="app"> <itembox></itembox> </div> <script>Vue.component("itembox",{ template:"<h2>www.gzsmbj.com</h2>"}) new Vue({ el:"#app", data:{ title:'11
阅读全文
摘要：你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板： <div class="static" v-bind:class="{ active: isActive, 'text-danger': h
阅读全文
摘要：v-on事件 简写 @click <div id="app"> <ul> <button @click="mybtn({title})">{{title}}</button> </ul></div> <script> new Vue({ el:"#app", data:{ title:'11111'
阅读全文
摘要：v-for 指令可以绑定数组的数据来渲染一个项目列表： <div id="app"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol></div> var app = new Vue({ el: '#app', data: { t
阅读全文
摘要：Vue v-if <div v-if="false"></div> 元素不会显示dom <div v-show="false"></div> 元素 只是 style="display:none"
阅读全文
