Vue框架

一、怎么引入vue到项目中使用

第一类引用方式

直接把vue的js代码库运行到html环境中

1.自己引入cdn

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.把vue.js文件放在项目文件夹中引入项目，然后webpack打包

vue.js在字节跳动静态资源公共库 (bytedance.com)这里下载

import Vue from './vue.js'
new Vue({
		el: "#app",
		data: {
			msg: "hello",
			age:"18"
		}
})

3、HbuilderX直接生成cdn的方式

HbuilderX 创建项目 选择 vue项目普通模式

4、本地引入

<script src="./src/vue2.6.14.js"></script>

<div id="app">
    {
  {msg}}
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			msg:"hello"
		}
	})
</script>	

第二类引用方式

1、自己构建vue的脚手架(面试):

用npm下载vue（npm i vue），引入到项目中 然后webpack打包

1.新建项目  alipay 
2.初始化配置文件:npm init -y
3.下载依赖:
 npm i webpack@5.74.0 webpack-cli@4.10.0 vue-loader@17.0.0 @vue/compiler-sfc@3.2.37 webpack-dev-server@4.10.0  html-webpack-plugin@5.5.0 -D
npm i vue -S 
4.webpack.config.js配置

5.项目配置文件 pakage.json文件

6.main.js文件

7.模板html文件中

 2、使用官方脚手架的方式来构建项目环境(面试)

1.  cnpm install  @vue/cli -g //下载官方脚手架
2.  vue create app1  //项目名称
3. 接下来让你选择一些默认要生成的工具,不管直接回车
4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端
5. 启动:
npm run serve  //生成的打包文件在内存中不会写入磁盘用于开发阶段
或者  
npm run build //生成的打包文件在dist中 用于项目上线

3、 可视化项目管理方式(面试)

1.  cnpm install  @vue/cli -g
2.  vue ui
3. 打开的界面 中
4.创建项目==>填写项目名字,选择项目创建的目录 点击创建
5.等待它下载所有配置文件完毕  
6.任务中serve启动以后相当于启动了热更新服务器:默认localhost:8080(也可以点启动app直接帮我们打开localhost:8080)
7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为:  ./ 然后点保存修改 

 4.编辑器直接生成脚手架环境的方式 (做项目推荐)

HbuilderX 创建项目 选择 vue项目 vue-cli默认模板
然后要:npm i
再:npm run serve

二、 VM对象和基础指令（面试）

1.普通插值表达式插入数据

在标签尖括号中使用{ {}}插入js表达式:变量,函数调用,三目运算等等,插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名

<div class="game">
    <h1>game</h1>
    name: <span>{
  {name.name1}}\{
  {name.name2}}\{
  {name.name3}}\{
  {name.name4}}</span><br>
    number: <span>{
  {number[0]}}\{
  {number[1]}}\{
  {number[2]}}\{
  {number[3]}}</span><br>
    more: <span>{
  {fn()+40}}</span>
</div>

<script>
    let game = {
       el: ".game",
       data: {
           name: { name1: "欢乐谷", name2: "扫雷", name3: "梦幻西游", name4: "大话西游" },
           number: [567, 778, 1233, 456],
           fn: () => 100 
        }
    }

    var vu = new Vue(game)
</script>

2.文本指令:(面试)

• v-html ==>相当于innerHTML
• v-text==>相当于innerText
• v-pre==>插件表达式就被识别为文本,而不是js表达式
• v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)

<style>
    .test2[v-clock]{
        display: none;
    }
    .test2{
        margin-top: 80px;
    }
</style>
<div class="test2">
    <b>{
  {test1}}</b>
    <div v-pre>{
  {hello world}}</div>
    <p><span v-text="test1"></span></p>
    <p v-html="test5"></p>
</div>

<script>
    let test = {
        el: ".test2",
        data: {
            test1: "11111",
            test2: "222222",
            test3: "3333333",
            test4: "4444444",
            test5: "<b>55555555</b>",
        }
    }
    var vt=new Vue(test)
</script>

3.给元素绑定属性

• 所有标签中属性绑定js中变量:
• 标准写法: v-bind:src="变量"
• 简写形式: :src="[10,20,30]"

<div class="test">
    <a v-bind:href="href">百度</a>
    <input :type="itype" :value="ivalue">

    <input :type="itype2" :placeholder="ivalue2">
</div>

<script>
    let test={
        el:".test",
        data:{
            href:"http://www.baidu.com/",
            itype:"button",
            ivalue:"点击",
            itype2:"text",
            ivalue2:"文本"
        }
    }

    var vt=new Vue(test)
</script>

三、事件

1、方法的写法

在methods中写方法,供事件或者别的方法内部调用方法的写法:由于是做了es6语法处理的 所以学过的所有方式的写法都行