Vue小tips-d01

Vue介绍

官网:https://cn.vuejs.org/

渐进式:根据功能需求逐次添加模块

vue特点:   易用，高效，灵活

vue核心:  组件化、数据驱动

vue缺点：个人维护

安装:

1. 开发环境:自己电脑的环境
2. 生产环境:线上环境 -->测试环境(与生产环境一致)

使用:

• 引入：三种方式　　

　　　　<!-- 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:‘优就业‘
　　　　}
　　})

解决闪烁问题：

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

　　　　　　<div id="app" v-cloak></div>

　　　　　　<style>

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

• 通过指令的方式

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

　　　　第一组：v-html,v-text
　　　　区别：

　　　　v-html:可以识别标签

　　　　第二组：v-if,v-else,v-else-if,v-show

　　　　　v-if与v-else之间不能有其他内容
　　　　　v-if，v-show：v-if 移除元素，偶尔使用；v-show设置display属性，频繁切换

　　　　第三组：v-for

　　　　数组:
　　　　<div v-for=‘(item,index) in arr‘>{{item}}------{{index}}</div>
　　　　对象:
　　　　<p v-for=‘(item,key,index) in obj‘>{{item}}------{{key}}---{{index}}</p>

　　　　第四组：v-bind:src 绑定属性
　　　　简写  :src

　　　　<!-- v-bind:绑定属性 不仅可以绑定已经存在的属性，还可以绑定自定义属性 -->
　　　　<a v-bind:href="url" v-bind:aa=‘aa‘>点击跳转</a>
　　　　注意：绑定属性均需要在data中声明

　　　　第五组：v-on:click

　　　　简写  @click

　　　　<button v-on:click=‘alert()‘>点击弹出</button>
　　　　// 在与data同级声明一个methods对象
　　　　methods:{
　　　　　　// v-on:click 简写方式为@click 同时方法名如果不需要传参，那么小括号可以省略，如果需要传参务必带括号
　　　　　　// ES6写法
　　　　　　alert(){
　　　　　　　alert(456)
　　　　　　}
　　　　　　// alert:function(){
　　　　　　　　// alert(123)
　　　　　　// }
　　　　}

　　　　第六组：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‘
　　　　},

Vue小tips-d01

原文：https://www.cnblogs.com/ssla3/p/14232229.html