VUE初级试炼2

Vue生命周期

初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
生命周期图

钩子函数

beforeCreated：该函数是在VUE实例化时调用。
created：创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。例如：是{ {name}}
mounted：
1.与JS中的Window.οnlοad=function({.,.}),Jquery中的$(document).ready(function(){…}）
2.在dom文档渲染完毕之后将要执行的函数，此时页面中的{ {name}}已经被渲染完成。
beforeDestroy：该函数将在销毁实例前进行调用。
destroyed：改函数将在销毁实例时进行掉调用。
beforeUpdate：组件更新之前
updated：组件更新之后

    <!DOCTYPE html>
   <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
   </head>
   <body>
   <div id="app">
       <input v-model="num"/>
       <h2>简单学习一门前端语言，这门语言叫做{
   
   {name}}</h2>
       <h3>我需要学习更多的语言，与时俱进</h3>
       <h4>{
   
   {num}}加油</h4>
       <!--如果num 没有在data中初始化那么num将无法新增-->
       <button v-on:click="add">点我Add方法</button>
       <button v-on:click="num++">点我</button>
   
   </div>
   </body>
   <script src="node_modules/vue/dist/vue.js"></script>
   <script>
       const demo = new Vue({
     
     
           el: "#app",
           beforeCreate: function () {
     
     
               // 首先进入
               this.num = 1;
           },
           data: {
     
     
               // 第二步
               name: "VUE",
               num: 2
           },
           created() {
     
     
               // 第三步
               this.num = 100;
           },
           beforeMount() {
     
     
               // 第四步
               this.num = 101;
           },
           methods: {
     
     
               add: function () {
     
     
                   this.num++;
               }
           }
       });
   </script>
   </html>

指令

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

例如我们在入门案例中的v-on，代表绑定事件。

插值表达式

花括号

格式：
{ {表达式}}
说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值)。
表达式必须有返回结果，例如1+1，没有结果的表达式不允许使用，如：var a= 1+1;
可以直接获取VUE实例中定义的数据或函数

例：
HTML
html <div id="app">{ {name}}</div>
JS:
js var app = new Vue({ el:"#app", data:{ name:"Jack" } })

v-text和v-html

使用v-text 和 v-html 指令来替代{ {}}
说明:

v-text：将数据输出到元素内部，如果输出的数据有html代码，会作为普通文本输出
v-html:将数据输出到元素内部，如果输出的数据html代码，会被渲染。
HTML

	<div id="app">
		v-text:<span v-text="hello"></span><br/>
		v-html:<span v-html="hello"></span>
	</div>
	<script>
		var vue = new Vue({
     
     
			el:"#app",
			data:{
     
     
				hello:"<h1>加油中国！加油世界!</h1>"
			}
			
		})
	</script>

这样动态插值就不会出现闪烁的状态，但没有值时只会是空白页面

v-model

v-text,v-html均为单向绑定，数据影响了视图渲染，但反过来就不行。
v-model是双向绑定，视图（View）和模型（Model）相互影响。双向绑定在视图中可以修改数据，这样限定了视图元素类型。
v-model可使用元素：

input
select
textarea
checkbox
radio
components(Vue中的自定义组件）

html

<div id="app">
	<input type="checkbox" v-model="language" value="java">Java</input>
	<input type="checkbox" v-model="language" value="PHP">PHP</input>
	<input type="checkbox" v-model="language" value="Python">Python</input>
	你选择了：{
   
   {language}}</br>
	你选择了：{
   
   {language.join(",")}}</br>
	<script src="node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var vue = new Vue({
     
     
			el:"#app",
			data":{
     
     
				language:[],
			}
		});
	</script>
</div>

实例1 实例2

v-on基本用法

v-on指令用于给页面元素绑定事件
v-on:事件名称 ="JS片段或函数名称"
vue中v-on支持的事件总结
示例：

	<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="add">点击Add增加1个Num</button>
    <button @click="minus">点击minus 减1个Num</button>
    <h1>
        现在有{
   
   {num}}个粉丝
    </h1>
    <span v-text="h_num"></span>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
     
     
        num: 1,
        el:"#app",
        beforeCreate:{
     
     

        },
        data:{
     
     
            num:1,
            h_num: "现在有"+this.num+"个粉丝",
        },
        methods:{
     
     
            add:function(){
     
     
                this.num++;
            },
            minus:function(){
     
     
                this.num--;
            }
        }
    });
</script>
</body>
</html>

绑定事件可以简写：例如：v-on:click 可以写成@click。

事件修饰符

在事件处理程序中调用event.preventDefault() 或event.stopPropagation()是非常常见的需求。
Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示。

.stop：阻止事件冒泡到父元素。
.prevent：阻止默认事件发生*
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
.once：只执行一次
实例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<div id="app">
   <button v-on:contextmenu.prevent="num++">add</button>
   <button @contextmenu="decrement($event)">mins</button>
   <h2>新增{
   
   {num}}粉丝</h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
   var vue = new Vue({
     
     
       el: "#app",
       data: {
     
     
           num: 1
       },
       methods: {
     
     
           decrement(ev) {
     
     
               this.num--;
           }
       }
   });
</script>
</body>
</html>

v-on:contextmenu.prevent：鼠标右键点击事件，取消下图窗口
在这里插入图片描述 @contextmenu：上图窗口依旧存在。

按键修饰符

监听键盘事件，Vue允许为v-on在监听键盘事件时添加按键修饰符。

<input v-on:keyup.13="submit"/>
<input @keyup.enter="submit"/>

全部按键别名：

.enter*
.tab
.delete(捕获“删除”和"退格“键）
.esc
.space
.up
.down
.left
.right

组合按钮

.ctrl
.alt
.shift
例如：

	<input @keyup.alt.67="clear"/>
	<div @click.ctrl="doSomething">Do something</div>

v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
语法：
````v-for="item in items``
实例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>VFOR</title>
</head>
<body>
   <div id="app">
       <ul>
           <li v-for="user in users">
               {
   
   {user.name}} - {
   
   {user.gender}} - {
   
   {user.age}}
           </li>
       </ul>
         <ul>
           <li v-for="(user,index) in users">
              {
   
   {(index+1) }}- {
   
   {user.name}} - {
   
   {user.gender}} - {
   
   {user.age}}
           </li>
       </ul>
   </div>
   <script src="node_modules/vue/dist/vue.js"></script>
   <script>
       var  vue = new Vue({
     
     
           el:"#app",
           data: {
     
     
               users: [
                   {
     
     name:"王大",gender:"男",age:12},
                   {
     
     name:"王大拿",gender:"男",age:32},
                   {
     
     name:"小姑",gender:"女",age:8},
               ]
           }
       });
   </script>
</body>
</html>

示例图
在这里插入图片描述

v-if和v-show

基本使用
v-if：条件判断。但结果为true时，所在的元素才会被渲染。
v-if="布尔表达式"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VFOR</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(user,index) in users" v-if="user.flag">
               {
   
   {(index+1) }}- {
   
   {user.name}} - {
   
   {user.gender}} - {
   
   {user.age}}
            </li>
        </ul>
        <ul>
        <!--v-show="!user.flag" = true-->
            <li v-for="(user,index) in users" v-show="!user.flag">
               {
   
   {(index+1) }}- {
   
   {user.name}} - {
   
   {user.gender}} - {
   
   {user.age}}
            </li>
        </ul>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var  vue = new Vue({
     
     
            el:"#app",
            data: {
     
     
                users: [
                    {
     
     name:"王大",gender:"男",age:12,flag:true},
                    {
     
     name:"王大拿",gender:"男",age:32,flag: false},
                    {
     
     name:"小姑",gender:"女",age:8,flag:false},
                ]
            }
        });
    </script>
</body>
</html>

v-else

你可以使用v-else 指令来表示v-if的“else”块:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VFOR</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(user,index) in users">
                <h6 v-if="user.age>10">
                    {
   
   {(index+1) }}- {
   
   {user.name}} - {
   
   {user.gender}} - {
   
   {user.age}}
                </h6>
                <h5 v-else>
                    {
   
   {(index+1) }}- {
   
   {user.name}} - {
   
   {user.gender}} - {
   
   {user.age}}
                </h5>
            </li>
        </ul>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var  vue = new Vue({
     
     
            el:"#app",
            data: {
     
     
                users: [
                    {
     
     name:"王大",gender:"男",age:12,flag:true},
                    {
     
     name:"王大拿",gender:"男",age:32,flag: false},
                    {
     
     name:"小姑",gender:"女",age:8,flag:false},
                ]
            }
        });
    </script>
</body>
</html>

else

v-bind

html属性不能使用双大括号形式绑定，只能使用v-bind指令。
在将v-bind用于class 和style时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
实例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VBIND</title>
</head>
<body>
    <div id="app">
            <div v-bind:title="m_title" v-bind:style="m_style"/>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
     
     
           el:"#app",
           data:{
     
     
               m_title:"title1",
               m_style:"border: 1px solid red; width: 50px; height: 50px;"
           }
        });
    </script>
</body>
</html>

绑定多个样式

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VBIND</title>
</head>
<body>
    <div id="app">
            <div v-bind:title="m_title" v-bind:style="[m_style,wh_style]"/>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
     
     
           el:"#app",
           data:{
     
     
               m_title:"title1",
               m_style:{
     
     border: "1px solid red"},
               wh_style:{
     
     width: "50px",height:"50px"}
           }
        });
    </script>
</body>
</html>