Vue.js核心概念-优快云博客

本文链接：https://blog.youkuaiyun.com/xkshihaoren/article/details/96651603

1.插值

文本插值使用双大括号的形式:

其中括号内的值会被解析成数据对象中的值，如果数据对象中的值发生变化，括号内的值也会联动发生变化

如果只需要渲染一次数据，后续的数据变化不再关心，则：

上述方式如果test的值是html片段，则会原封不动的替换，而不是替换成html的形式

如果要增加html解析的功能，则:

{{{ test }}}

例子:假设  test = <p>这是一个段落</p>

{{{ test }}} =====>会渲染成真实的html： 这是一个段落

{{ test }} =======>会直接替换成字符串：<p>这是一个段落</p>

同时，双大括号还可以在标签内使用：

<div class = '{{ test }}'></div>

同时，双大括号同时也接收表达式，包含js表达式和过滤器

<!--JS表达式-->
{{ true : 1 ? 0 }}
{{ str.split(',') }}


<!--管道filter-->
{{ example | toUpperCase }} ===>这里的toUpperCase 就是过滤器，是指是一个函数，返回全大写
{{ example | filterA | filterB }} ====>允许过滤器串联
{{ example | filterA a b }} ====>允许传入参数 a b 用空格隔开

但是如果大括号内不是多条语句或者声明语句，而不是表达式，则不支持:

<!--JS无效格式-->
{{ var log = '123' }}  ====> 这是语句，不是表达式，不起作用

{{ if(true) { str } else { str1 } }} ====>虽然if else中的是字符串的变量，但是这个不是一个表达式，而是一段语句

2.指令

指令是带有v-前缀的特殊属性，其值绑定了数据对象中的值或者表达式

(1) v-if

v-if指令可以完全根据表达式的值来在dom中生成或者移除一个元素（false移除，true添加）
注意：如果含有v-if属性的标签还有子标签，会一并添加或者移除

<template>
  <div class="about">
    <div v-if="isDisplay">
      <p>显示内容</p>
      <button @click="switchDiv">隐藏</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data () {
      return {
        isDisplay:true
      }
    },
    methods:{
      switchDiv:function(){
        this.isDisplay = false;
      }
    }
  }
</script>

(2) v-show

v-show指令是根据响应数据的值来显示和隐藏HTML元素，比如：
v-show的赋值为false的时候，元素上会多一个内联样式：style = 'display: none '
v-show和v-if的区别在于v-show是通过css来控制，无论true或者false，这个HTML元素都会存在于DOM中

总结：
v-if是惰性的，只有true的时候才会被编译,会有很高的切换消耗
v-show元素始终被保留，会有很高的初始渲染消耗

(3) v-model

用来在表单控件是实现数据的双向绑定(具体每个标签略)

在默认情况下，v-model中的数据会与数据实时同步，但是可以使用lazy数据将其改到change事件上来：

<!--
	通过添加lazy属性，在input更改的值会在用户输入enter或者离开光标后才会刷新
-->
<input type='text' v-model='msg' lazy>
{{ msg }}

当然也可以使用debounce属性来设置一个最小延时，每次更改数据后延时指定时间后菜户同步刷新数据

<!--
	
-->
<input type='text' v-model='msg' debounce = '50000'>
{{ msg }}

(4)v-for

基于源数据重复渲染元素：

<ul>
	<!--customer of customers也可以-->
	<li v-for = '(customer,index) in customers' :id = 'index'> 
		{{ customer.name }}
		{{ $index }} //呈现数据索引(customers中的第几个元素)
		{{ id }} //和$index的方式类似
	</li>
</ul>

v-for不仅可以渲染数组，还可以渲染对象：

<ul>
	<!--customer of customers也可以-->
	<!--
		object:{
			first: 'x',
			second: 'y'
		}
	-->
	<li v-for = 'value in object' > 
		{{ vaule }} //会依次输出x和y
	</li>
</ul>

(5)v-text

更新元素的textContent

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

等价于

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

(6) v-html

更新元素的innerHTML,即：
{{{ content }}} 等价于 v-html = ‘content’

(7) v-bind

强制将html的属性值绑定至vue数据对象中
v-bind:src = ‘content’ 等价于 :src = ‘content’

<p :class = 'somthing'></p>
<!--双向绑定-->
<p :class.sync = 'something'> </p>
<!--单次绑定-->
<p :class.one= 'something'></p>

3.自定义vue语法

VUE中数据绑定的语法是可以自定义的，src/config.js文件中包含了一些语法格式，例如:

	原文件src/config.js：
		let delimiters = ['{{','}}']
		let unsafeDelimiters = ['{{{','}}}']
	我们可以在main.js中更改：
		Vue.config.delimters = ['<%','%>']
	如果更改成这个，以后数据绑定的代码为:
		<% test %>

4.过滤器filter

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome '
    }
  },
  //定义filter
  filters: {
    reverse: function(val){
      return val + 'filter'
    }
  }
}

<!--使用filter-->
<div id='app'>
	<!--会输出Welcomefilter-->
	{{ msg | reverse }}
</div>

过滤器是支持串联的：
{{ value | filterA | filterB … }}
在过滤器内是没有this引用的，即：
this ==undefined

5.vue脚手架vue-cli

使用npm安装vue-cli:

npm i vue-cli -g

进入对应目录创建项目：

vue init webpack my-project

列出所有可以使用的模板：

vue list

开发环境下运行vue
这个指令是在package.json的script属性设置的，实质上是由npm引导执行入口程序dev-server.js来完成加载过程

npm run dev

生产环境编译

npm run build

6.webpack的基本用法(自定义配置)

(1)在开发过程中有一些包是需要下载到本地使用的(npm中不存在),我们在项目中就需要引用一段很长的文件路径

import Selector from ../../../../bower_test/select.....

我们可以通过webpack的resolve来配置长路径或者…/这些相对路径,在webpack.base.config.js中：

modult.export = {
	entry: {}.
	.....
	resolve: {
		extensions: ['','.js'],
		alias: {
			//使用别名来代替一些长路径或者比较常出现的长字符
			'bs-select': '长路径'
			'~': '../'
		}
	}
}

(2)配置多入口程序

在一个项目中的程序入口一般不只有一个,所以需要增加多个类似main.js的入口文件

/index请求index.html
/admin请求admin.html
这些入口js文件会被生成至启动页的script标签内
在build/webpack.base.conf.js文件中：

module.export = {
	entry: {
		//app、admin这些名称可以在后面定义HtmlWebpackPlugin中使用
		app: './src/main.js',
		admin: './src/admin-main.js'
	}

}

webpack中的HtmlWebpackPlugin插件用于生成html入口页面并将js和css文件的引用地址写入到入口html中的对应位置
在build/webpack.base.conf.js文件中：

 new HtmlWebpackPlugin({
      filename: 'admin.html',
      template: 'admin.html',
      inject: true,
      //要与entry一致
      chunks: ['admin']
    }),

如果需要将上面的admin-main生成在另一个html入口页，则需要再多配置一个HtmlWebpackPlugin对象，其中的chunks必须使用在entry中定义的admin
最后：build/webpack.prod.conf.js文件中增加

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
	admin: path.resolve(__dirname, 'admin.html'),
	.....
	}
}