vue基础入门

**

vue基础篇

介绍
1、vue是渐进式框架
2、vue是MVVM模型（不完全是，有参考）
3、双向数据绑定
4、组件化开发

搭建流程
1、安装脚手架
cnpm install -g @vue/cil //全局安装
2、创建项目
vue create project-name(项目名称不包含大写)
3、运行项目
npm run serve

页面配置文件

main.js俩种挂载方式

new Vue({
  el:'#app',  //①
  render: h => h(App),
}).$mount('#app')  //②

模板语法

• vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至Vue实例的数据。所有Vue,js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析
• 在底层实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作地次减少到最少
• 语法：
  {{单行表达式}}
  *模板语法渲染地永远是一个字符串
• 语法限制：每个绑定只能包含单个有返回值的表达式

指令语法 <div v-xxx="js表达式"></div>

文本：<span>Message: {{ msg }}</span>

HTML: <div v-html="header">aa(底层替换所以不显示aa) </div>
header:"<span>"哈哈哈"</span>

动态绑定属性：<a v-bind:href="baidu">starsky</a> baidu: "https://www.baidu.com"
缩写：“v-bind:” === " : "

条件渲染

<p v-if="flag">显示或不显示</p>
<p v-else></p>
<div v-show></div>

v-if和v-show的区别
①v-if是正真的条件渲染，因为它会确保在切换的过程中条件块内的事件监听和子组件适当地被销毁和重建
②v-if是惰性的：如果在初始条件渲染时条件为假，则什么也不做，直到第一次条件变为真，才会开始渲染条件块
③v-show不管条件为真假，元素总会被渲染，基于css(display:none)进行切换
④一般来说v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此如果非常频繁的切换，使用v-show较好。

列表渲染
遍历数组：<li v-for="(item,index) in names" :key="index">{{ item }}</li>
遍历对象：<p v-for="(item,name,index) in user" :key="index">{{ name }}:{{ item }}</p> 键值标三个参数顺序不能变
:key的作用
当Vue.js用v-for正在更新渲染的元素列表时，它默认用“就地复用的策略”。如果数据项的顺序被改变，Vue将不会移动。DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM
v-if和v-for一同使用
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

上面的代码将只渲染未完成的 todo。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 ) 上。如：

<ul>
    <template v-for="(item,index)  in friult">
        <li v-if="item.flag"  :key="index">{{item.name}}</li>
    </template>
</ul>
<p v-else>No todos left!</p>

事件处理

<button v-on:click="clickHandle">按钮</button>
methods:{
    clickHandle(){
        console.log("点击事件");
    }
}

缩写：“v-on:” === “@”

event对象

clickHandle(e){
    console.log(e);
}

事件传参以及event对象（内联处理器中的方法）

<li @click="clickHandle(item,$event)" v-for="(item,index) in names" :key="index">{{ item }}</li>
clickHandle(value,event){
    console.log(value,event);
}

动态class
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
<div :class="{ active: isActive }">Class样式1</div>
<div :class="[{'fix':true},{'cRed':false},{'cgreen':true}}]"> //动态绑定多个class

动态style绑定
对象写法 :style="{ color: activeColor, fontSize: fontSize + 'px' }"
数组写法 :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

三目运算符判断多值
{{result==1?'优':(result===2?'良':(result==3?'中':(result==4?'差':'')))}}