Vue 学习-前端开发_沃梦达教程

day01安装 vue//npm安装npm install vue//jsscript src=node_modules/vue/dist/vue.js/script//js 最新的vue script src=https://cdn.jsdelivr.net/npm/vue/dist/vue.js/scripthelloWorlddiv i...

day01

安装 vue

//npm安装
npm install vue
//js
<script src="bm9kZV9tb2R1bGVzL3Z1ZS9kaXN0L3Z1ZS5qcw=="></script>

//js   最新的vue 
<script src="aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS92dWUvZGlzdC92dWUuanM="></script>

helloWorld


<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

v-html v-text

v-text 显示差值表达式内容一样

<span v-text="msg"></span>

<span>{{msg}}</span>

v-html 可以渲染html 模板

<span v-html="html"></span>

v-cloak , v-if , v-show

v-cloak 设置这个属性，防止网速慢,差值表达式闪烁问题


<!--css-->
[v-cloak] {
  display:none !important;
}

<!--html-->
<div v-cloak>
  {{ message }}
</div>

v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-bind

v-bind 单项绑定绑定某一个值简写（：）

<!-- 绑定一个 attribute -->
<img v-bind:src="aW1hZ2VTcmM=">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="aW1hZ2VTcmM=">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="Jy9wYXRoL3RvL2ltYWdlcy8=" + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

在将v-bind用于 class和 style时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

01对象方法:

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

02数组方法:

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

<div class="active text-danger"></div>

03 可以用三元表达式

如果你也想根据条件切换列表中的 class，

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

04 数组加对象

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

v-on

v-on :绑定事件简写（@）

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

键盘修饰符

<!-- 按下所有键盘都会触发submit方法 -->
<input v-on:keyup="submit">
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

内置的

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

其他需要键盘码，或者全局指定

//例如  112键盘码指向f1
Vue.config.keyCodes.f1 = 112

//使用
<input @keyup.f1="submit">

v-model

单行文本:

<input v-model="message" >
<p>Message is: {{ message }}</p>

复选框

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Boolean值绑定

<input type="checkbox" v-model="toggle">

####修饰符

.lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

v-for

一个参数当前对象

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

:key 在2.2.0版本后强烈建议使用 :key 追踪每个节点的身份性能也能得到提升

<!--  in 等价于 of-->
<div v-for="item of items"></div>

两个参数 : 即当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

三个参数: (对象, 对象属性名, 索引)

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

遍历对象

你也可以用 v-for 来遍历一个对象的 property。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

day02

filter

只能在 {{插值表达式}}和v-bind中使用

定义过滤器：全局 ,页面中vm示例都能使用 (|：管道符)

<div id="app">
  <h4>{{ msg | msgFilter("我是参数arg") }}</h4>
  {{date}}
</div>

Vue.filter("msgFilter",function(msg, arg01){  //第一个参数是msg 数据 ,后面都是传递的参数
  console.log(arg);
  return msg.replace(/我们/g,"你们");  //  /g  全局匹配
})

定义过滤器：局部(私有) , 只有当前vm示例能使用 ,多个过滤器使用 | 分割

<div id="app">
	{{date | dataFormat('') | currentLog }}  
</div>

new Vue({
  el: "#app",
  data: {
    date: new Date()
  },
  filters:{
    dataFormat(format=""){  
      let y = data.getFullYear();
      let m = (data.getMonth() + 1).toString().padStart(2,"0");		//padStart ,  padEnd填充字符串(需要长度,用什么填充)
      let d = data.getDate().toString().padStart(2,"0");
      if (format.toLowerCase() === "yyyy-mm-dd") {
        return `${y}-${m}-${d}`
      }else{
        let hh = data.getHours().toString().padStart(2,"0");
        let mm = data.getMinutes().toString().padStart(2,"0");
        let ss = data.getSeconds().toString().padStart(2,"0");
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
      }
    },
    currentLog(){
      consloe.log("currentLog  过滤器被使用")
    }
  }
})

###directive

全局属性 Vue.directive v-开头的都是vue指令

注册或获取全局指令。使用： v-my-directive

// 注册
Vue.directive('my-directive', {
  //每个function的第一个参数都是绑定的元素  是一个元素的js对象 
  
  bind: function (el) {  //每当指令绑定上元素会触发这个函数,只执行一次
    //在元素刚绑定指令时，还没有插入到dom中去 ， 这时候调用focus()  方法无效
    //因为元素只有插入dom之后才能获取焦点
    el.focus()
  },
  inserted: function (el) {  //元素插入dom中会执行		,只执行一次
    el.focus()
  }, 
  update: function () {},   //当节点更新的时候触发	   ,可能会执行多次
  componentUpdated: function () {},   //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  unbind: function () {}  //只调用一次，指令与元素解绑时调用。    
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

钩子函数参数

el：指令所绑定的元素，可以用来直接操作 DOM。

binding：一个对象，包含以下 property：
  name：指令名，不包括 v- 前缀。
  value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

如果只写bind ,update方法，可以简写

Vue.directive('my-directive', function(el,binding){ }); 

directives : {
  'font':function(el, binding){
    
  }
}

生命周期

示例博客

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wOvAyj8D-1617427377741)(images\vue生命周期.jpg)]

vue-resource

请求方式:
  get(url, [options])
  head(url, [options])
  delete(url, [options])
  jsonp(url, [options])
  post(url, [body], [options])
  put(url, [body], [options])
  patch(url, [body], [options])

options 参数说明:

url	`string`	请求的目标URL
body	`Object`, `FormData`, `string`	作为请求体发送的数据
headers	`Object`	作为请求头部发送的头部对象
params	`Object`	作为URL参数的参数对象
method	`string`	HTTP方法 (例如GET，POST，…)
timeout	`number`	请求超时（单位：毫秒） (`0`表示永不超时)
before	`function(request)`	在请求发送之前修改请求的回调函数
progress	`function(event)`	用于处理上传进度的回调函数 ProgressEvent
credentials	`boolean`	是否需要出示用于跨站点请求的凭据
emulateHTTP	`boolean`	是否需要通过设置`X-HTTP-Method-Override`头部并且以传统POST方式发送PUT，PATCH和DELETE请求。
emulateJSON	`boolean`	设置请求体的类型为`application/x-www-form-urlencoded`

get

this.$http.get(url, 参数). then(function(data){ 正确返回方法 }, function(error){ 异常方法 } )

this.$http.get("https://autumnfish.cn/api/joke",{params: {name:"zxy", age: 18}}).then(data=>{
  console.log(data.bodyText);
})

axios

示例博客

get

axios.get('http://localhost:8080/user/findById?id=1')  //url
  .then(function (value) {  //成功函数
  console.log(value);
})
  .catch(function (reason) { //失败函数
  console.log(reason);
})

post

axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})  //url, post请求参数
  .then(function(response){  
  console.log(response);
},function (err) {
  console.log(err);
})

发送多个请求 01


function getUser1() {
  return axios.get('url');
}
function getUser2() {
  return axios.get('url');
}  
axios.all([getUser1(), getUser2()])
  .then(axios.spread(function (user1, user2) {
})

发送多个请求 02

axios.all([
  axios.get('url'),
  axios.get('url')
])
  .then(axios.spread(function (user1, user2) {
})

day03

动态属性

vue2.6+ 新特性

使用[attr] 动态绑定data中的"attr"

<div id="app">
  <p :[attr]="msg">pppppppppp</p>
</div>

const app = new Vue({
  el: "#app",
  data: {
    msg : "这是msg",
    attr: "title"
  }
})

组件化

注册全局组件

定义组件方式一

const myComponent=  Vue.extend({
  template : "<h3>第一个组件</h3>"
})

Vue.component("myComponent" ,myComponent);

定义组件方式二

Vue.component("login", {
  template: '<div><h1>用户登录</h1></div>'
})

定义组件方式三

<template id="login-template">
  <login-info>登录信息提示</login-info>
</template>

Vue.component("login",{
  template: "#login-template"
});

注册私有组件(局部组件)

定义组件方式四

new Vue({
  el: "#app",
  components: { //局部组件
    helloComponent: {
      template: "<div>hello</div>"  //也可以使用选择器 template的id
    }
  }
})

展示组件

<component :is="myComponent"></component>

或者
<!-- 首字母 大写的要转换成 ”-小写“ -->
<my-component></my-component>

组件中的data

示例中的data 是一个对象，组件中的对象是一个方法返回值必须是一个对象

const app = new Vue({
  el: "#app",
  data: {

  },
  components:{
    myComponent : {
      template : "<h3>第一个组件{{msg}}</h3>",
      data(){
        return {
          msg: '这是一个消息'
        }
      }
    }
  }
})

props

获取自定义属性值区别于data data(可读可写) props(只读)

<my-component my-title="5oiR5piv5qCH6aKY" ></my-component>

new Vue({
  el: "#app",
  components:{
    myComponent : {
      template : "<h3>第11一个组件{{msg}}</h3>",
      data:function(){
        return {
          msg: '这是一个消息'
        }
      }
      props:{
      	//使用驼峰命名获取 属性值
        myTitle:""
      }
    //  props:["myTitle"]
  }
 }
})

父组件向子组件传值

通过props

<div id="app">
  <my-component :msg="parent"></my-component>
</div>

const app = new Vue({
  el: "#app",
  data: {
    parent: "我是父组件"
  },
  components:{
    myComponent:{
      template: "<h3>我是一个子组件==={{msg}}</h3>",
      props:["msg"]
    }
  }
})

$emit

vue中关于$emit的用法

父组件的方法传递给子组件

<div id="app">
  <!--03 使用组件， 使用vm实例的show方法-->
  <my-component @func="show"></my-component>
</div>

<!-- 定义组件  --> 
<template id="myComponent">
  <div>
    <h3>我是子组件</h3>
    <button @click="myClick">myClick</button>  <!--01 所以点击就相当调用了show()-->
  </div>
</template>

new Vue({
  el: "#app",
  methods: {
    show() {  //04 父组件show方法
      console.log("Vue...show()...")
    }
  },
  components: {
    myComponent: {
      template: "#myComponent",
      methods: {
        myClick() {  
          this.$emit("func")   //02 子组件用$emit接收 @func
        }
      }
    }
  }
})

$ref

$ref ：拿到组件的引用操作dom

<div id="app">
  <input type="button" @click="getElement" value="获取信息" />
  <h3 ref="myh3">这里是h3信息</h3>
</div>

const app = new Vue({
  el: "#app",
  methods: {
    getElement() {
      console.log(this.$refs.myh3.innerText);
    }
  }
})

day04

vue-router

router

url中#(hash) 的意义

路径携带 #/ (hash) 实现单页面之间的切换，通过不同的hash切换页面的方式就叫前端的路由（#/login, #/list）

后端的路由就是所有的url地址，都回对应的服务器上的资源

安装： npm install vue-router

<div id="app">
  <!--访问路由路径href中必须使用hash以#/  开始-->
  <a href="#/login">login</a>  
  <!--与a标签唯一区别  <router-link> 不支持 target="_blank"，如果你想打开一个新标签页，你必须用 <a> 标签。-->
  <router-link to="/register">register</router-link>
  <!--显示路由试图-->
  <router-view></router-view>
</div>

路由基本使用

//登录组件
let login = {
  template: "<h1>用户登录</h1>"
}
//注册组件
let register = {
  template: "<h1>用户注册</h1>"
}
let router = new VueRouter({
  routes:[
    {path:'/' , redirect: "/login"},  //打开页面访问/  就会重定向到/login
    {path:'/login' , component: login},  // path:路由路径  component:这个路由显示那个组件
    {path:'/register' , component: register}
  ]，
  linkExactActiveClass:"myExactActive",  //加上激活的类(前者)
  linkActiveClass:"myActive"		//加上激活的类(后者)
})
const app = new Vue({
  el: "#app",
  router 
})

routes 详细对象参数

/**   	属性	  详解
        path	路径
        name	命名路由
        component	命名视图组件
        components	命名视图组件
        redirect	重定向路径
        alias	别名
        children	嵌套路由
        meta	路由元信息 使用$route.meta.属性可以获取
        caseSensitive	匹配规则是否大小写敏感？(默认值：false)
        pathToRegexpOptions	编译正则的选项 
 */

路由嵌套

<div id="app">
  <router-link to="/product">product</router-link>
  <router-view></router-view>
</div>

<template id="product">
  <div>
    <h1>商品管理</h1>
	<!-- 	链接使用 /父路由/子路由	-->
    <router-link to="/product/edit">add</router-link>
    <router-link to="/product/add">edit</router-link>

    <router-view></router-view>
  </div>
</template>

const product = {
  template: "#product",
}
const add = {
  template: "<h3>商品添加</h3>",
}
const edit = {
  template: "<h3>商品编辑</h3>",
}

const router = new VueRouter({
  routes: [
    {
      path: "/product",
      component: product,
      children: [   //children 展示子路由  path前不能加/ 
        {path:"add",component : add},
        {path:"edit",component : edit}
      ]
    }
  ]
})

let app = new Vue({
  el: '#app',
  router : router
});

路由传参

<div id="app">
  <!-- 路由获取参数的两种方式 -->
  <router-link to="/login?username=zhaoxingyu&password=123456">登录</router-link>
  <router-link to="/register/21/zhaoxingyu">注册</router-link>
  <router-view></router-view>
</div>

const login = {
  template: `<h1>用户登录---{{$route.query.username}}---{{this.$route.query.password}}</h1>`,
  created() {
    console.log("参数data", this.$route.query);  //？传递的参数都在this.$route.query里面封装
  }
}
const register = {
  template: "<h1>用户注册---{{$route.params.id}}---{{this.$route.params.name}}</h1>",
  created() {
    console.log(this.$route.params);  //路径参数 / 都在this.$route.params里面封装
  }
}
const router = new VueRouter({
  routes: [
    { path: "/login", component: login },
    //传入的参数会封装成	this.$route.params：{id: 21, name:"zhaoxingyu"} 
    { path: "/register/:id/:name", component: register } 
  ]
})
let app = new Vue({
  el: '#app',
  methods: {},
  router: router
});

Components

注册组件 name使用

<div id="app">
  <!-- 默认的  name="default" -->
  <router-view></router-view>
  <router-view name="left"></router-view>
  <router-view name="right"></router-view>
</div>

const header = {
  template: "<h2>header</h2>"
}
const leftBox = {
  template: "<h2>leftBox</h2>"
}
const rightBox = {
  template: "<h2>rightBox</h2>"
}
let router =  new VueRouter({
  routes:[
    {path:"/",components:{  //注册进components  ，router-view name指定
      "default": header,
      "left": leftBox,
      "right": rightBox
    }}
  ]
})
const app = new Vue({
  el: "#app",
  router
})

day05

watch

监听data属性值的变化 (不能使用箭头函数)

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {	//新的值 ， 旧的值
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})

注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

watch监视路由，

const app = new Vue({
  el: "#app",
  watch: {
    '$route.path': function(arg1, arg2) {
      console.log(arg1, arg2);
    }
  },
  router
})

###slot

插槽slot详讲

compute

计算属性，在这里定义，能提高效率，便于维护

computed: {
  aDouble: vm => vm.a * 2  //箭头函数this不能指向vm的实例
}

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})

compute : 的属性如果连续获取两次 str1和str2没有发生变化，第二次就会直接获取上一次属性值，不会再次调用，

<div id="app">
  <input type="text" v-model="str1" />+
  <input type="text" v-model="str2" />=
  {{all}}
  {{all}}
</div>

const app = new Vue({
  el: "#app",
  data: {
    str1 : "",
    str2 : ""
  },
  computed:{
    all:function(){
      return this.str1+"-"+this.str2;  //str1 str2的值发生改变就会触发这个函数  ，要有返回值
    }
  }
})

npm

安装完成node 

配置淘宝镜像
npm config set registry "https://registry.npm.taobao.org/"

设置缓存和全局文件路径
npm config set cache "D:\Environment\Node\npm-cache"
npm config set prefix "D:\Environment\Node\npm-global"

检查配置
npm config ls

下载nrm： npm i nrm -g 

查看可用镜像 nrm ls 

切换镜像  nrm use taobao

webpack

安装webpack工具

npm install webpack -g

在项目中运行 npm install webpack --save-dev 安装到项目依赖中

项目提交至码云

安装git
全局配置git信息
- git config --global user.name “zhaoxingyu”
- git config --global user.email “2920991307@qq.com”

设置.ssh 公钥

设置:
	ssh-keygen -t rsa -C "2920991307@qq.com"
查看公钥信息
	cat ~/.ssh/id_rsa.pub
检查配置成功?
	ssh -T git@gitee.com

git init 初始化项目加入.git 文件夹
git status 状态查看
git add . 文件添加至暂存区
git commit ‘第一次提交项目’ 项目提交至本地
git remote add origin git@gitee.com:q290991307/vue0821-2.git
git push -u origin master 提交至主分支