Vue2框架基础知识1

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

Vue介绍

介绍
1. 渐进式 JavaScript 框架渐进式项目中可以逐步使用vue框架可以使用一部分或者是整个项目
2. 框架单页面的应用程序 vue项目入口只有一个页面 index.html
3. 跳转的页面路由功能- 路由其他页面组件
4. 框架里面使用的是虚拟DOM 没有js BOM DOM
特点
1. 易用
2. 灵活
3. 高效
优缺点
1. 优点易用灵活高效易于维护
2. 缺点
  1. 首页加载速度慢
  2. 不利于搜索引擎优化

Vue使用

使用vue局部使用
1. 引入 Vue 的cnd网址或者是下载到本地js文件类似jquery.js
2. 创建vue实例
3. 代码演示

    <body>
        <h2>普通的css布局实现的项目</h2>
        <p>测试vue使用在项目中不是整个项目用vue写的 局部使用</p>
        <p id='xx'>xxx--{{ msg }}</p>

        <!-- 使用vue  -->
        <div id='app'>
            <p>vue的区域了 app-- </p>
            <p>获取vue数据{{ msg }}</p>
            <p>{{ arr }}</p>
        </div>


        <!-- 创建vue实例 -->
        <script>
            const vm = new Vue({
                el:'#app',//获取element元素 
                data:{
                    msg:'hello vue',
                    arr:[1,2,3]
                }
            })
        </script>
    </body>

搭建vue项目
1. 兼容性
  Vue 不支持 IE8 及以下版本因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
2. 安装vue 命令行工具 (CLI)
  1. 介绍Vue 提供了一个官方的 CLI为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。
  2. 网址https://cli.vuejs.org/zh/
  3. 版本Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)
  4. 先安装yarn: npm i yarn -g (推荐)
  5. 安装vue-cli
    npm install -g @vue/cli 下载模块npm install 模块
    或者
    yarn global add @vue/cli 下载模块yarn add 模块
    
    命令来检查其版本是否正确
    vue --version
3. 创建一个vue项目–通过脚手架vue-cli
  1. 创建vue项目 vue create vue-project
    说明vue项目名称最好是英文不能包含驼峰命名法
  2. 按需项目需要的依赖配置
  3. 进入项目
    cd 项目名称
  4. 启动项目
    npm run serve
    或者
    yarn serve
  5. 打包项目
    npm run build

目录结构

vue-project
node_moudles 安装包依赖 --模块
public 单页面入口 - index.html
src 资源文件 – 前端
assets 静态文件资源 - 放置 css js images
components 公共组件 - 组件化样式布局效果
App.vue 根组件
main.js 入口配置文件

.browserslistrc 浏览器配置
.gitignore      上传git仓库 忽略的文件配置
babel.config.js babel配置
package.json    项目配置文件 查看项目安装的依赖 版本 名称... 
readme.md       项目说明文件 
yarn.lock       配置信息 忽略

安装vue代码工具

Vetur

Vue组件组成

组成-三部分
1. template 视图标签 template标签不会被渲染只是包裹作用必写
2. script 逻辑代码
3. style 样式
  scoped 样式作用域当前作用域
创建组件
1. xxx.vue 后缀.vue结尾
2. 三部分组件快捷键
组件使用
1. 引入组件
2. 注册组件
3. 使用组件

    <script>
        //1. 引入组件
        import Banner from './components/Banner.vue'

        export default {
            name: 'App',
            //2. 注册组件
            components: {
                Banner,
            }
        }
        </script>

    <!-- 3. 使用组件 -->
    <Banner></Banner>

Vue指令

指令就是以 v-指令=‘js环境’ 具体特定的工具指令。

模板语法 - 表达式
1. 作用获取vue数据显示视图模板语法来声明式地将数据渲染进 DOM
2. 语法{{ js表达式 }}
v-html=‘’ -原生HTML
1. 作用输出真正的 HTML你需要使用 v-html 指令 (innerHTML)
2. 语法
v-text=‘’
1. 作用渲染视图 innerText
2. 语法:
v-if=‘’ 条件渲染
1. 作用是否显示元素/ true 显示 false 隐藏
2. 语法
3. 特点
  v-if=‘’ 控制元素是否渲染或者销毁
v-else
1. 作用是对 v-if=''的结果取反
2. 语法
  
  xxxx
v-else-if
1. 作用是否显示元素与v-if v-else-if 多语句判断
2. 语法
  
  xxxx
v-show=‘’
1. 作用是否显示元素/ true 显示 false 隐藏
2. 语法
3. 特点
  控制元素的 display:block/none
4. v-if与v-show区别
  v-if: 控制元素的渲染或者销毁
  v-show:控制元素的 display:block/none
  场景
  频繁切换 v-show
  初次渲染优化v-if
v-for=‘’ - 列表渲染
1. 作用遍历数组或者对象
2. 语法
3. {{ item }}
属性
1. item 第一个元素表示数组的每一项内容
2. index 第二个元素表示数组的下标 0 1 …
3. arr 数组数据
v-bind:属性=‘’ 绑定属性 key=‘’
作用做当前数据的唯一标识一般写的是id 不推荐 index
语法
2. 简写
遍历对象

{{ index }}. {{ key }}: {{ value }}
value 对象的值 key 对象的键名 index 下标0 1 ...

v-for 与 v-if 一同使用

注意我们不推荐在同一元素上使用 v-if 和 v-for 、v-for 的优先级比 v-if 更高
解决方法

    <ul>
    <template v-for="item in zaoshi">
        <li :key="item.id" v-if="item.flag">
        {{ item.fruit }}
        </li>
    </template>
    </ul>

v-bind:属性=‘’ 动态绑定属性
1. 作用给标签元素绑定一个动态属性
2. 语法
  2. 简写
Vue 事件
1. 介绍
  可以用 v-on 指令监听 DOM 事件并在触发时运行一些 JavaScript 代码
2. 定义事件
  语法<div v-on:事件名=‘dosomething’>
  函数dosomething定义的位置
  要求定义mothds属性中
3. 事件1. this指向 2. 事件传递参数 3. 事件对象event
  1. 事件的this指向当前组件实例对象
  2. 事件传递参数 v-on:click=‘canshu(1,2)’
  3. 事件对象event
    1. 函数不带参数第一个参数默认是事件对象 event
    2. 函数带参数事件对象需要手动传递 $event
      v-on:事件名=‘函数’
      简写
      @事件名=‘函数’