vueday01

Vue介绍：官网:https://cn.vuejs.org/
渐进式:根据功能需求逐次添加模块
vue特点:易用，高效，灵活
vue核心:组件化
使用:
首先引入:3种方式

<!-- 1.引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 2.引入 -->
<!-- <script src="./vue.js"></script> -->
<!-- 3.node安装 -->
<!-- <script src="./node_modules/vue/dist/vue.min.js"></script> -->

创建元素

<div id="app">
<!-- {{}} 胡子语法 -->
<div>{{msg}}</div>
<p v-html='msg'></p>
</div>

实例化

let vm = new Vue({
// element 挂载app
el:'#app',
data:{
// 需要往页面渲染的所有数据都需要在data中声明
msg:'hello world!',
content:'优就业'
}
})

　　

解决闪烁问题
1.给id=‘app'增加v-cloak属性，通过设置样式来解决闪烁

<div id="app" v-cloak>
</div>
<style>
/* 属性选择器 */
[v-cloak]{
display: none;
}
</style>

　　

2.通过指令的方式

<p v-html='msg'></p>//v-html叫做指令

vue指令：
1、v-html,v-text:区别:
v-html:可以识别标签
2、v-if,v-else,v-else-if,v-show
v-if与v-else之间不能有其他内容
v-if，v-show:v-if 移除元素，偶尔使用 v-show:设置display属性 频繁切换
3、v-for:
数组:

<div v-for='(item,index) in arr'>{{item}}------{{index}} 
</div>

对象:

<p v-for='(item,key,index) in obj'>{{item}}------{{key}}---{{index}}</p>

4、v-bind:src 绑定属性 简写:
<!-- v-bind:绑定属性 不仅可以绑定已经存在的属性，还可以绑定自定义属性 -->

<a v-bind:href="url" v-bind:aa='aa'>点击跳转</a>

注意:绑定属性均需要在data中声明
5、v-on:click 简写@

<button v-on:click='alert()'>点击弹出</button>

在与data同级声明一个methods对象

methods:{
// v-on:click 简写方式为@click 同时方法名如果不需要传参，那么小括号可以省略，如果需要传参务必带括号
// ES6写法
alert(){
alert(456)
}
// alert:function(){
// alert(123)
// }
}

6、v-model：双向数据绑定

// 双向数据绑定只能应用于表单元素
// 模型可以控制视图，视图可以修改模型 M（model）V(view) VM(viewModel)控制器 
// MVVM设计模式:擅长做数据的增删改查 不擅长做动画和操作DOM vue
// MVC 设计模式: M(model) V（view） C(control)控制器 react 
<div id="app">
<!-- 视图 -->
<input type="text" v-model='msg'>
{{msg}}
</div>
data: {
// 模型
msg:'hello world'
},