vue 基础知识

落日映苍穹つ 2022-09-07 14:47 183阅读 0赞

# v-on引入vue插件 #

在网上可以下载vue.js 然后再html 文件中导入：

# Vue 数据显示 #

# Vue 添加watch 监听 #

vm.$watch('a',function(newVal,oldVal){
    	 		 console.log(newVal);
    	 		 console.log(oldVal);
    	 })

其中 ' a' 是被监听的变量  回调函数中 newVal 是修改之后的变量值，oldVal 是修改之前的变量值

# Vue 生命周期函数 #

# Vue 模板语法 #

v-once：我们知道的是在vue中，当我们改变量的值，那么页面上的显示也会变化，那么是否能够改变量的值，但是页面的显示不变化  可以在标签中添加 v-once 这个方法

v-html: 如果我们想插入一段html该怎么实现，v-html 可以帮助我们在页面中插入一段html

比如：

<div id="app" v-once>
    			{
       {a}}
    			<span v-html="rawHtml"></span>
    		</div>
    .........
        var vm=new Vue({
    		 el:"#app",
    		 data:{
    			 a:1,
    			 rawHtml:"<span style='color:green'>Hello World</span>"
    		 }
        })

v-bind 给html标签的属性绑定值，属性可以是class，id ，src,href 等等,比如：

<p v-bind:id="ok">我是一只小小小小鸟</p>

data:{
    			 a:1,
    			 rawHtml:"<span style='color:green'>Hello World</span>",
    			 ok:"oooook"
    		 }

![20210824102540662.png][]

v-if 如果后面的变量为真  则显示这个标签，如果不为真，则不显示

data:{
    			 a:1,
    			 rawHtml:"<span style='color:green'>Hello World</span>",
    			 ok:"oooook",
    			 isshow:true
    		 },

<p v-if="isshow">我显示了吗</p>

v-show 如果后面的变量为真  则显示这个标签，如果不为真，则不显示，v-if 和 v-show  如果在频繁的修改是否显示中，可以用v-if ，v-show 在初始化的时候进行渲染，如果v-show=false 实际上是display 为none

<p v-show=false>nihao</p>

v-on 是添加事件，比如添加一个点击的事件

methods:{
    			 welcome:function(name){
    				 console.log(name+' welcome come to China!!');
    			 } 
    		 },

# v-if 条件判断 #

# v-for 列表渲染 #

var vm=new Vue({
    		 el:"#app",
    		 data:{
    			 items:[
    				 {name:"wdg18",age:18},
    				 {name:"wdg19",age:19},
    				 {name:"wdg20",age:20}
    			 ]
    		 }
          })

# v-model 表单变量双向绑定 #

什么是双向绑定，就是我们的input 标签中的值和vue 中data 属性 的值绑定在一起，双方谁去修改，另外一方都会发生改变

data:{
    	         ......
    			 msg:"nihao",
                 .......
    		 },
    		 methods:{
    	         ....
    			 showValue:function(e){
    				 console.log(e.target.value);
    				 console.log(this.msg)
    			 }
    		 },

上面是和表单元素进行绑定，当然还可以和checkbox进行绑定：

<input type="checkbox" value='1' v-model="boxs"/>选项1
    		<input type="checkbox" value='2' v-model="boxs"/>选项2
    		<input type="checkbox" value='3' v-model="boxs" />选项3
    
            ......
    
    	    data:{
                .....
    			 boxs:['1','2']
    		 },

单选框的双向绑定：

<input type="radio" name="radios1" value='1' v-model="radioName" />单选1
    <input type="radio" name="radios1" value='2' v-model="radioName" />单选2
    .....
    		data:{
    		   .....
    			 radioName:'2'
    		 },

# Vue 组件基础，创建组件 #

创建最为简单的组件：

<mybutton></mybutton>
       ...... 
       Vue.component("mybutton",{
    		 template:"<div><p>我是组件内部的p 标签</p> <button style='color:green'> 组件按钮"+ 
                       +"</button></div>"
    	 })

给组件中的按钮添加添加点击事件

Vue.component("mybutton",{
    		 data:function(){
    			return{
    				count:0,
    			}
    		 },
    		 methods:{
    			 countAdd:function(){
    				 this.count++;
    				 console.log(this.count);
    			 }
    		 },
    		 template:"<div><p>我是组件内部的p 标签</p>"+
    		 "<button style='color:green' v-on:click='countAdd'> 组件按钮</button></div>"
    	 })

上面创建创建的组件是全局的组件，这样会占用比较多的内存和开销，创建组件的作用是代码的服用，比较常用的方法是创建单页面的组件，首先我们创建一个vue的项目

我们先按照下面的命令安装，vue-cli

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

然后在命令行输入：

vue ui

就会弹出提示让我们用浏览器打开，在弹出的vue的管理器中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

我们可以创建vue的项目，然后使用HBuildX软件打开

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

node\_modules 是存放相关的组件模块和插件

public 是我们用webpack 打包的文件夹

src 存放源代码文件

在src的 components 文件下面创建Test.vue 文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

内容如下：

<template>
    	  <div id="app">
    	       <h1 class="h1_title">{
       {msg}}</h1>
    	  </div>
    </template>
    <script>
    	export default{
    		name:'test',
    		props:{
    			msg:{
    				type:String,
    				default:"test msg"
    			}
    		},
    		methods:{
    			
    		},
    		data(){
    			return {
    				
    			}
    		}
    	}
    </script>
    
    <style>
    .h1_title
    {
    	color:red;
    	font-size: 18px;
    }
    </style>

然后修改App.vue (入口文件)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

上面就是我们创建一个单文件的组件

上面是学习的vue的基本的基础知识，希望对你帮助

[20210824102540662.png]: /images/20220829/a2349a4d94f14b6aa5e28b9a52aac70a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/aa633e6efbcf4923b65378dd4676b736.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/4fa71335c313453d9a1545c50848876c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/38cc419a68ba4daeb452adb0f58fbf31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/e654ce79ae5943798c490b2f942c7498.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: /images/20220829/2f0791c2047a42afbb04df3cdfe59403.png