Vue--Vue模板语法--Vue指令(文本渲染,v-bind绑定,class和style绑定,事情处理,条件渲染,列表渲染,表单输入绑定)--Vue组件(定义组件,使用组件,is属性,模板)

目录

 一.Vue模板语法

一.插值

二.JavaScript 表达式

二.指令

一.文本渲染

 二.class和style绑定

 三.事件处理

四.条件渲染

五. 列表渲染

六.表单输入绑定

 三.组件

一.定义组件

二.使用组件

三.is属性

---

Vue.js  是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue.js 提供了 MVVM (Model-View-ViewModel 的简写)数据绑定和一个可组合的组件系统，具有简单、灵活的 API。

MVVM: 它采用双向绑定（data-binding）：View 的变动，自动反映在ViewModel，反之亦然。

Vue 框架有以下特点:

1. 简洁： HTML 模板 + JSON 数据。
2. 数据驱动： 自动追踪依赖的模板表达式和计算属性。
3. 组件化： 用解耦、可复用的组件来构造界面。
4. 轻量： ~24kb min+gzip，无依赖。
5. 快速： 精确有效的异步批量 DOM 更新。
6. 模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。 

 一.Vue模板语法

1.创建一个新的 Vue 实例 :

        var app = new Vue({ });

2.准备 html(在 Vue 的 html 中使用{ {}}来获取组件定义的 data 数据) :

        

             {
    {message}}
        

3.引用Vue.js 搭建好 Vue 环境,开始准备使用 Vue :

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例:

        1).el(element)代表要绑定 html 代码片段的根元素;

        2).data 定义该代码片段上绑定的数据 

一.插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

        
{
    {message}}

Mustache 标签将会被替代为对应数据对象上 message 属性的值。无论何时，绑定的数据对象上 message 属性发生了改变，插值处的内容都会更新 .

二.JavaScript 表达式

在 Vue 模板中，提供了完全的 JavaScript 表达式支持

        {
    { number + 1 }}//数值运算

        {
    { ok ? 'YES' : 'NO' }}//三目运算符

        {
    { message.split('').reverse().join('') }}//字符串方法操作

注意:只能在模板中写入表达式，而不能使用 js 语句，所以下面的写法会报错:

        
		{
    { var a = 1 }}
	
		{
    { if (ok) { return message } }}

二.指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM.

一.文本渲染

1. v-text: 在 html 中插入数据，跟{ { }}功能一致

        

             

             
             
{
    {msg}}
        
        

2. v-once:  数据只会更新一次,下次更新不影响dom

        

             {
    {msg}}
             
{
    {msg}}
        
        

3. v-html: 可以显示html元素 

        

             {
    {msg}}
             

        
        

 二.class和style绑定

1.v-bind指令可以绑定元素的属性,动态给属性赋值,比如:v-bind:class,v-bind:style,v-bind:href形式
                格式: v-bind:属性名="组件中定义的数据"
                简化为:  属性名="组建中定义的数据"
                        改写成:  :class,:style,:href等

            

		
hello
		

		
fnoefhoijfi
		

		
fuhuef
		

		
		

		fsada
	    
	    

 2. class:  绑定DOM对象的class样式有以下几种形式:
                        绑定多个class
                        使用对象classObject绑定
                        使用数组classlist绑定
                        绑定的对象可以同时切换多个class

        

	
vue
	

	
vue
	

	
Vue
	
Vue
	
	
	

对象和数组绑定的区别:
                    对象可以控制class的添加和删除,数组不能控制删除

3. style绑定
                  绑定形式与class一致
                  使用内联对象Object
                  直接传入对象styleobject
                  使用数组对象styleList 

        

	    
赢你大爷啊
	    

	    
赢你大爷啊
	    

	    
赢你大爷啊
	    

	    
赢你大爷啊
	
	

 三.事件处理

 1. 监听事件
            语法:v-on:事件名
            简写:@事件名监听事件 :

            增加
	    减少

2.  方法事件处理器

一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑。需要在 methods 属性中定义方法，然后 v-on 引用对应相关的方法名。

        

	    count:{
    {count}}  
	    增加
	    减少
	
	

 3. $event 对象

事件处理函数中访问 DOM 原生事件 event 对象，可以使用特殊变量$event 对象传入。

        

         
             greet
        
        

4.  事件修饰符

Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。

1. stop ： 阻止 event 冒泡，等效于 event.stopPropagation()
2. prevent ： 阻止 event 默认事件，等效于 event.preventDefault()
3. capture ： 事件在捕获阶段触发
4. self ： 自身元素触发，而不是子元素触发 
5. once ： 事件只触发一次

        

		

		    
child
		
		

		
		

		    
child
		
		

		
		百度
		

		
		
		

		    
child
		
		

		
		
father
		    
child
		
		

		
		
child
	
	

5. 键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：
           .enter，  .tab ， .delete (捕获“删除”和“退格”键)，  .esc ， .space，  .up，  .down，  .left，  .right 

四.条件渲染

1、v-if
                当条件返回true时，执行
            2、v-else
                 当if条件不满足时，执行（要结合v-if一起使用）
            3、v-else-if
                 当满足条件时执行（要结合v-if一起使用）  
            4、v-show
                 满足条件时显示，不满足隐藏
            5、v-if 和 v-show
                 两者的区别是v-if是“真正”的条件渲染，只有为true时才会被渲染。v-if也是“惰性”的，假如初始条件为false，那么条件变为true时才会发生第一次渲染。
                 v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者block。
                 一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。

        

	    
你看不见我
  {
    {flag}}
	    

	    
狗蛋是18岁
	    

	    
狗蛋不是18岁
	    

	    
老司机
	    

	    
刚成年
	    

	    
小屁孩
	    

	    
谁还看不见谁啊
	
        

五. 列表渲染

1. v-for

可以把一组值进行列表渲染，语法形式： item in items，items 是源数据数组并且 item 是数组元素迭代的别名。

在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

v-for 也可以遍历对象，可以指定三个形参:
                    形式: v-for="(value, key, index) in object"
                             value: 对象的值
                             key: 对象的键
                             index: 遍历的索引

        

	    

		
{
    {item.name}}
	    
	    

	    

		
{
    {type}}--{
    {index}}--{
    {item.name}}
	    
	    

	    

		
{
    {index}}--{
    {key}}--{
    {value}}
	    
	
        

2. key 属性

用 v-for 渲染列表时， 使用 key 属性给每个指定一个唯一的 ID 表示，那么可以在下次数据渲染时，提高渲染速度。它默认用“就地复用”策略。

如果数据项的顺序被改变，重复 ID 的元素将会被再次使用，不会重新渲染。这个默认的模式是高效的。需要用 v-bind 来绑定动态值 

        

	    

		
{
    {item.name}}{
    {item.id}}
	    
	
        

3. 取值范围

v-for 也可以指定整数，用来重复多次使用模板。

        

             

                 
第 {
    {i}} 次
             
        

六.表单输入绑定

v-model
                用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
                v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。
                单个使用时v-model是逻辑值：true和false，多个一起使用需要指定value值，选中结果绑定v-model的数组。

        

	    
	    
	    文本值:{
    {txtMsg}}
	    

	    
	      选中状态{
    {ck}}
	    

	    HTML5
	    java
	    Vue
	    
多选结果:{
    {lesson}}
	    
	    喜欢
	    不喜欢
	    都喜欢
	    
结果:{
    {love}}
	    
	    
		watermelon
		banana
		apple
	    
	    
结果:{
    {selected}}
        
        

下拉框绑定

        div id="dada">
	    
	        {
    {item.text}}
	    
	

修饰符
                使用v-model绑定数据后，可以使用修饰进行数据处理：
                    lazy：绑定数据默认实时更新，lazy可以在onChange触发
                    number：返回数字类型的值，转换不成返回NaN
                    trim：去除数据的前后空格 

        

	    
{
    {name}}
	    
		
	    

	    
显示值
        

 三.组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

一.定义组件

Vue 自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前 Vue 实例使用。

 1. 全局注册: 使用 Vue.component(tagName, options)来定义

 

        /*定义全局组件*/
        Vue.component('my-component',{
             template:'
我是自定义组件
'
        });

 注意，HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用进行引用。

 2. 局部注册: 在 Vue 实例中使用 components 属性来定义

        var app = new Vue({
             el:'#app',
         //使用 components 关键字
             components:{
                 'inner-component':{
                 template:'
我是局部注册组件
'
                 }
             }
        });

二.使用组件

三.is属性

is属性
                  在table标签中直接使用自定义组件，无法正常显示。DOM解析时会解析到

标签的外部：     
                  原因是：table/ol/ul/select 这种html标签有特殊的结构要求,不能直接使用自定义标签。他们有自己的默认嵌套规则,比如: 
                  table> tr> [th, td]; 
                  ol/ul > li; 
                  select > option 

四.模版

                当模板的html结构比较复杂时，直接在template属性中定义就不现实了，效率也会很低，此时我们可以使用模板，定义模板的四种形式:
                1)直接使用字符串定义
                2)使用