Vue 基础 笔记1
博客园不兼容typora有点蛋疼哦
什么是Vue
Vue是一种数据驱动的渐进式前端开发框架，主要用于解决复杂的DOM操作。
特点
渐进式， 组件化， 响应式
模式MVVM（Model View ViewModel）简略...
Model: 负责数据存储，用数据表示模型
View: 负责页面展示
ViewModel: 负责业务逻辑(比如ajax请求)，对数据进行加工后还给View展示
数据双向绑定 简略...
数据可以驱动视图的变化，视图也可以驱动数据的变化。后期再深究原理。
虚拟DOM
JS内被构建的类似DOM的对象。它可以用来去拼装数据，拼装完整后，把数据整体解析（一次性完成DOM操作），一次性插入html中，而不像传统操作时机DOM一样不停操作HTML，影响性能。
条件渲染
v-if/v-else-if/v-else
v-show
列表渲染
注意：元素绑定key可以让元素不被Vue混用。绑定key的时候，如果key的值是变量，应当加冒号 :key='variable'，常量可以直接 key=‘10’
单次插入后不再更新 v-once
v-html=带有HTML语法的变量 可以自动解析其内部语法
v-cloak: 可以防止
动态属性
:value
计算属性
:style
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: {
now: function () {
return Date.now()
}
}
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
监听器：计算太多性能低，少用
如果我们希望数据能够实时更新，可以使用监听器 v-watch来监听数据。一旦某个数据（一般是watch对象里面的对应属性）发生改变，它内部的函数就会被调用 ，属于1对N的操作：1个变量变化，N个相关函数调用。
<body>
<div id="app">
{{msg}}<br>
<div :style='css'>
</div>
<button @click="changeColor">更改</button>
</div>
<script src="../vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
color:"red",
css: {
width: "100px",
height: "100px",
backgroundColor: "red"
}
},
methods:{
changeColor: function(){
if(this.css.backgroundColor == "yellow"){
this.color = "red";
}else{
this.color = "yellow";
}
this.css.backgroundColor = this.color;
}
},
// 内部引用的变量发生变化它就会自动运行
computed:{
msg: function(){
slogan=(this.color=="red")?"红色铁拳!":"苍天已死，黄天当立！"
return slogan;
}
},
// 指定的数据（如msg）改变可以触发的函数，放在监听器中
watch:{
msg: msg=>{
alert("大人，时代变了！");
},
}
});
</script>
</body>
动态class渲染
<body>
<div id='app'>
<div :class="isActive?'red':'green'"></div>
<div :class="{dark:isActive}"></div>
<div :class="classObj"></div>
<div :class="classArr"></div>
<button @click='handler'>切换</button>
</div>
</body>
<script src='../vue.js'></script>
<script>
let app =new Vue({
el: "#app",
data: {
isActive: true,
// 对象给元素添加多个对象类型...
classObj:{
student: true,
green: true
},
classArr:["dark", {border: true}],
},
methods:{
handler: function(){
this.isActive = !this.isActive;
}
}
});
</script>
内联样式渲染
<body>
<div id="app">
<!-- 直接渲染样式 -->
<div style="width: 100px;height: 100px;background: darkgreen;" :style="{border: borderWidth +'px solid yellow', padding:paddingWidth+' px'}"></div>
<!-- 用对象渲染样式-->
<div :style="styleObj"></div>
<!-- 用数组渲染样式 -->
<div :style="styleArr"></div>
</div>
</body>
<script src="../vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data:{
borderWidth: 15,
paddingWidth: 10,
styleObj: {
width: "180px",
height: "180px",
backgroundColor: "skyblue"
},
styleArr: [
{
width: "200px",
height: "200px",
backgroundColor: "darkred"
},
{
border: "5px black solid"
}
]
},
});
</script>
表单渲染
<body>
<div id="app">
<h1>称呼</h1>
<input type="text" name="user" v-model='username' id=""><br>
{{username}}
<h2>描述:鼠标离开才会发生修改一节省性能</h2>
<textarea name="描述" id="" cols="30" rows="10" v-model.lazy="description"></textarea>
<p>{{description}}</p>
<h2>领域</h2>
<span v-for="area in domains">
{{area}}
<input v-model="checkedDomain" :value="area" type="checkbox" name="domins" id="">
</span>
<p>{{checkedDomain}}</p>
<h2>性别</h2>
<span v-for="item in gander">
{{item}}
<input type="radio" :value="item" v-model="sex" name="" id="">
</span>
<p>{{sex}}</p>
<h2>城市</h2>
<select name="cities" id="" v-model="city">
<option v-for="region in cities" :value="region">{{region}}</option>
</select>
<p>{{city}}</p>
<h2>爱好</h2>
<select name="" id="" multiple="multiple" v-model="hobby">
<option v-for="like in hobbies" :value="like">{{like}}</option>
</select>
<p>{{hobby}}</p>
</div>
</body>
<script src="../vue.js"></script>