前端Vue基础学习 - 好文

<>Vue基础

对与vue的简洁明了的干货分享，适合小白学习观看，如果有笔误或者想了解更多的，请给笔者留言，后续会继续分享，从零开始的vue相关经验
当然你如果没有搭建过vue项目请查看笔者另一篇博文vue入门级教程从零搭建一个vue项目
<https://blog.csdn.net/marendu/article/details/90514969>

*
创建vue实例
<div id="app"></div> const vm = new Vue({ el:'app', data:{ } })
*
插值语法
 <div id="box"> {{name}} <
p> {{20>30?'小于':'大于'}}</p> <p>{{10+20}}</p>  <p v-html=
"name"></p> <p v-if="isShow">我是动态创建和删除</p> <p v-show="isShow">我是动态隐藏和显示</p>  <button v-on:click=
"handleClick">点击</button> <p v-bind:class="isShow?'aa':'bb'"></p> </div> <script
> var vm = new Vue({ el:"#box", data:{ name:"<b>xiaoming<b/>", isShow:true, },
methods:{ handleClick(){ console.log(11); this.isShow=false; } } }) </script>
*
条件渲染
<body> <div id="box"> <p v-if="isCreated">渲染删除</p> <p v-else>qqq</p>  <template v-if="isCreated"> <p>ddddd</p> <p>ddddd</p> <p>ddddd
</p> <p>ddddd</p> <p>ddddd</p> </template>  <p v-show=
"isShow">显示隐藏</p> </div> </body> <script src="../vue.js"></script> <script>
const vm = new Vue({ el:"#box", data:{ isCreated:true } }) </script>
*
列表渲染
body> <div id="box">  <!
-- 每一项应该有一个唯一的key 一般为id -->   <input type="text" v-model=
"mytext">  <ul>  <li v-for="(data,index) in
cmputeddatalist" :key="index"> {{data}} -- {{index}} </li> </ul> </div> </body>
<script src="../vue.js"></script> <script> const vm = new Vue({ el:"#box", data:
{ datalist:['aa','bb','ccc'], mytext:"", }, cmputed:{ cmputeddatalist:function()
{ return this.datalist.filter(item=>item.indexof(this.mytext)>-1) } } }) </
script>
*
事件处理
<div id="box">  <p>{{count}}</p> <button @click=
"count=count-1">-</button> <button @click="count=count+1">+</button>  <p>{{name}}</p> <button @click="handleClick">click</
button>  <button @click=
"handleClick1(1,2,$event)">click</button>  <
!-- 事件修饰符 .stop阻止冒泡 prevent阻止默认事件 once只会触发一次 self只有事件源为本身时才能触发,修饰符可以串联使用.stop.
prevent--> <ul @click="ulclick "> <li @click="liclick">1111</li> </ul>  <input type="text" v-model="text" @keydown.enter=
"enter">{{newtext}} </div> <script src="../vue.js"></script> <script> var vm =
new Vue({ el:"#box", data:{ count:1, name:"xiaoming", text:"", newtext:"" }, //
methods中的方法，可以在this的$options.methods中找到，可以实现方法互用 methods:{ enter(){ this.newtext
=this.text }, handleClick(ev){ console.log(ev.target); this.name="aaaa" },
handleClick1(a,b,event){ console.log(a,b,event.target) }, ulclick(){ console.log
('ul的点击') }, liclick(){ console.log('li的点击') } } }) </script>
*
css与style的绑定
<style> .aa{ background: red; } .bb{ background: yellow; } </style> </head> <
body>   <div id=
"app"> <p class="red" :class="isshow?'aa':'bb'">css样式</p> <p :style="obj">对象样式</
p> <p :style="[obj,obj2]">数组样式</p> </div> <script src="../vue.js"></script> <
script> const vm = new Vue({ el:"#app", data:{ isshow:false, obj:{ background:
"red", }, obj2:{ fontSize:"30px" } } }) //
在vue中向font-size:30px,要写成fontSize:"30px"; </script>
*
表单的输入与绑定
<body>  <div id="box"> <
input type="text" v-model="value">{{value}}<br/> <input type="checkbox" v-model=
"isChcked">{{isChcked}}<br/>  <input
type="checkbox" v-model="checkgroup" value="react">react<br/> <input type=
"checkbox" v-model="checkgroup" value="vue">vue<br/> <input type="checkbox" v-
model="checkgroup" value="jquery">jquery<br/> {{checkgroup}}  <input type="text" v-model.lazy=
"name">{{name}}<br/> <input type="number" v-model.number="age">{{age}}<br/> <
input type="text" v-model.trim="text">|{{text}}|<br/> </div> </body> <script src
="../vue.js"></script> <script> const vm = new Vue({ el:"#box", data:{ value:"",
isChcked:false, checkgroup:[], name:"", age:"100", text:"" } }) </script>
8.methods中定义方法，

9.computed计算属性，可以当做变量使用，computed会根据数据改变而重新计算，调用多个时，只会执行一次，然后缓存值，methods会多次执行，

10.watch监听某一属性的改变，而触发，（推荐使用computed）

查看下一篇 vue的组件与通讯 <https://blog.csdn.net/marendu/article/details/90440463>

热门工具换一换