Vue: 新手上路

水深无声 2023-06-30 02:42 60阅读 0赞

### 文章目录 ###

*  1.vue 新手上路
 *  2.vue 常用指令
 *   *  v-text v-html
     *  v-if v-show
     *  v-for
 *  3.数据绑定
 *  4.事件绑定
 *  5.过滤器的使用
 *  6.数据监听watch 和 计算属性computed

# 1.vue 新手上路 #

# 安装node.js,下载安装
    http://nodejs.cn/download/
    # 查看是否安装成功 npm命令验证 并更换国内淘宝源
    # 更改npm源
    npm config set registry https://registry.npm.taobao.org
    # 切换到官方源
    npm config set registry http://www.npmjs.org
    # 查看源
    npm get registry
    
    # 安装vue ,首先创建项目目录，在里面执行
    npm install vue
    # 找到vue.js 复制出来 简单是用
    # node_modules\vue\dist\vue.js

**简单使用**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue 简单引包 使用</title>
    </head>
    <body>
        
        <div id="app"></div>
    
        
        <script type="text/javascript" src="vue.js"></script>
    
        
        <script type="text/javascript">
            new Vue({
                el:"#app",
                template:
                  //``    类似python的三引号
                  //{
       { }} 插值表达式
                  `
                     <div>我这里是模板内容 {
       {msg}} </div>
                  `,
                data:function(){
                    return {
                        msg:"hello world"
                    }
                }
            })
        
        </script>
    </body>
    </html>

# 2.vue 常用指令 #

*  v-text 元素的innerText 必须是双标签
 *  v-html 元素的innerHTML
 *  v-if 判断是否插入 append remove等
    
    v-else-if
    
    v-else
 *  v-show 判断是否隐藏 => display:noe
 *  v-for: 循环数组或对象

## v-text v-html ##

······
    <script type="text/javascript">
    new Vue({
                el:"#app",
                template:
                //``    类似python的三引号
                //{
       { }} 插值表达式
                `
                    <div>
                        <div v-text="mytext"></div>
                        </hr>
                        <div v-html="myhtml"></div>
    
                    </div>
                `,
                data:function(){
                    return {
                        mytext:"<h1>hello world, text </h1>",
                        myhtml:"<h1>hello world, html </h1>"
                    }
                }
            })
    </script>
    ······

图片展示 `v-text 和 v-html` 的区别

![在这里插入图片描述][20200114163243419.png]

## v-if v-show ##

代码中的按钮 指挥显示一个，根据num的值不同

没有显示的按钮,调式中可以看到,它被注释 `<---------->` 占位

而`if show` 是`display:none` 隐藏了

## v-for ##

attr = ["篮球"，"排球","足球"]
    objer = {"play":"篮球","people":"ming","num":11} 
    
    <ul>
    	<li v-for="item in attr">
            {
       {item}}
    	</li>
    </ul>
    
    
    v-for="(iter,index) in attr"
    v-for="oj in objer"             => ob是value
    v-for="(oj,key) in objer"

# 3.数据绑定 #

单向数据绑定 `v-bind` : 内存数据改变 ,可以影响页面的数据改变，但是页面改变不会影响内存

双向数据绑定 `v-model`: 内存页面任何一个改变,都会更改另外一个

# 4.事件绑定 #

点击事件为例：

<button v-on:click="change">点击事件<>
        
    Vue:
       methods:{
          change:function(){
        	this.name = "我变了，改值"	
          }
        }

# 5.过滤器的使用 #

对数据进行改造再显示

全局 Vue.filter

组件 filters

格式 \{ \{ msg | 过滤器 \}\}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue 简单引包 使用</title>
    </head>
    <body>
        
        <div id="app">
            输入: <input type="text" name='' v-model='inputstr'></br>
            我的输出: {
       { inputstr }}</br>
            过滤反转: {
       { inputstr | reversal }}
        </div>
        
        <script type="text/javascript" src="vue.js"></script>
        
        <script type="text/javascript">
            new Vue({
                el:"#app",
                data(){
                    return {
                        inputstr:''
                    }
                },
                filters:{
                    reversal(val){
                        return val.split('').reverse().join('')
                    }
                }
    
            })
    </script>
    </body>
    </html>

过滤器进行传参

{ {  inputstr | reversal("我是arg2:") }}
    
    filters:{ 
      reversal(val,arg2){ 
         return arg2+val.split('').reverse().join('')
    }

全局过滤器

Vue.filter("函数名").function(val,arg2){ 
        return args2+val.split('').reverse().join('')
    }

# 6.数据监听watch 和 计算属性computed #

watch 监听数据改变 数据变化会触发监听的方法，入参为新旧值

new Vue({ 
        el:"#app",
        data(){ 
       		return { 
        		msg:''
        	}
        },
    
        watch:{ 
        	msg(newval,oldval){ 
        		console.log(newval)
        		console.log(oldval)
             }
        }

如果watch要监听复杂类型

v-mode=msg.text
    
    msg:{ 
    	handler(newval,oldval){ 
    		if(newwal.text == "love"){ 
    			alert(newval.text)
    		}
    	},
    	deep:true
    }

**computed** 计算属性

监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数

插值表达式，插入result
    { { result}}
    
    data中的变量
    n1:"0"
    n2:"0"
    n3:"1"
    
    与data同级
    computed:{ 
    	result(){ 
    		return (Number(this.n1)+Number(this.n2))*Number(this.n3)
    	}
    }

[20200114163243419.png]: https://img-blog.csdnimg.cn/20200114163243419.png