WEB--vue学习01

文章目录

1. vuejs简介

1.1 vue简介

官方网站：https://nodejs.org/en/

中文网站：http://nodejs.cn/

学习教程：https://learning.dcloud.io/#/

node.js：开源与跨平台的js运行时环境

npm：node.js包管理工具，node.js文件包含了npm。

1.2 环境配置

node.js环境

yum install git
git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

# 激活NVM
echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile

# 列出Node.js的所有版本
nvm list-remote

# 安装指定版本
nvm install v14.16.1

# 查看已安装版本
nvm ls

# 切换使用版本
nvm use v14.16.1

mac下node环境

brew install nvm 

# 在.bash_profile 中添加
cd ~ && vim .bash_profile 
-----------------------
# nvm
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
------------------------------
# 生效
source .bash_profile

# nvm使用
$ nvm ls-remote 查看 所有的node可用版本
$ nvm install xxx 下载你想要的版本
$ nvm use xxx 使用指定版本的node 
$ nvm alias default xxx 每次启动终端都使用该版本的node 

# 查看
node -v
npm -v

脚手架

# 安装npm，mac下安装文件位置：/usr/local/lib/node_modules
brew install npm

# 从淘宝镜像源安装cnpm(国内版npm)
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 安装vue脚手架工具
cnpm install -g @vue/cli 

# 安装js压缩打包工具
cnpm install -g webpack

1.3 vue.js文件引用

方式一：下载

官方网站(https://cn.vuejs.org/v2/guide/installation.html)点击开发版本或生产版本进行下载

在html页面配置，如下

<script type="text/javascript" src='vue.js' charset="utf-8"></script>

方式二：CDN

参照官网(https://cn.vuejs.org/v2/guide/installation.html)

2. vue.js使用代码

2.1 初级使用

# demo.html

<body>
    
    <!-- v-once：修改属性值后html展示不更新 -->
    <div id="demo" v-bind:class="color">
        {
   
   { message }}
        <!-- v-html: 设置文本内html标签html格式展示 -->
        <p v-html='message'></p>
        <p>{
   
   { num + 1 }}</p>
        <p v-if='seen'>如果为true就展示</p>
        <div @click='click1'>
            <!-- .stop 阻断了点击事件click1 -->
            <!-- v-bind:class---根据值判断是否绑定xx属性 -->
            <!-- v-bind:style---根据值判断是否绑定xx属性 -->
            <div @click.stop='click2' v-bind:class='{active: inActive}'
            v-bind:style="{
       
        color: activeColor, fontSize: fontSize + 'px' }"> 
                click me 
            </div>
        </div>
        <!-- if判断 -->
        <div id="v-if">
            <div v-if="type===1">A</div>
            <div v-else-if="type===2">B</div>
            <div v-else="type===3">C</div>
        </div>


        <div id="v-show">
            <!-- ok为true，display -->
            <h1 v-show="ok">Hello!</h1>
        </div>


        <div>
            <ul>
                <!-- 列表渲染(每个数组元素即为一个对象) -->
                <li v-for="item,index in items" :key="index">
                    {
   
   { index }}.{
   
   { item.message }}
                </li>
                <!-- 对象渲染(每个数组元素即为一个对象) -->
                <li v-for="value,key in object" :key="key">
                    {
   
   { key }}: {
   
   { value }}
                </li>
            </ul>
        </div>
        <!-- 调用函数 -->
        <div>
            <button v-on:click='func2(1, $event)'>Add 1</button>
            <button v-on:click="counter += 1">Add 1: {
   
   { counter }}</button>
            <p>The button above has been clicked {
   
   { counter }} times.</p>
        </div>
        <!-- 表单 -->
        <!-- v-model双向绑定 -->
        <input v-model="sss" placeholder="edit me">
        <p>Message is {
   
   { sss }}</p>
        <textarea v-model="comments" placeholder="please edit comments">
        </textarea>
        <div style="margin-top: 20px;">
            <input type="checkbox" id="a" value="A" v-model="checkedNames">
            <label for="a">A</label>
            <input type="checkbox" id="b" value="B" v-model="checkedNames">
            <label for="b">B</label>
            <input type="checkbox" id="c" value="C" v-model="checkedNames">
            <label for="c">C</label>
            <br>
            <span>Checked Names: {
   
   { checkedNames }}</span>
        </div>
        <div style="margin-top: 20px;">
            <input type="radio" id="a" value="A" v-model="picked">
            <label for="a">A</label>
            <input type="radio" id="b" value="B" v-model="picked">
            <label for="b">B</label>
            <input type="radio" id="c" value="C" v-model="picked">
            <label for="c">C</label>
            <br>
            <span>picked Names: {
   
   { picked }}</span>
        </div>
        <button type="button" @click="submit">提交</button>
    </div>


    <script type="text/javascript">
        // new一个Vue对象，并定义属性
        var app = new Vue({
     
     
            el: '#demo',
            data: {
     
     
                message: '<p>This is red</p>',
                color: 'red',
                num: 10,
                seen: true,
                inActive: true,
                activeColor: 'white',
                fontSize: 30,
                type: 2,
                ok: true,
                counter: 0,
                items: [
                    {
     
     'message': 'A'},
                    {
     
     'message': 'B'},
                    {
     
     'message': 'C'},
                    {
     
     'message': 'D'},
                ],
                object: {
     
     
                    title: 'vue object',
                    author: 'zhanfsan',
                    commit: 'test',
                },
                sss: "",
                comments: '',
                checkedNames: [],
                picked: '',
            },
            methods: {
     
     
                click1: function(){
     
     
                    console.log('click1.....');
                },
                click2: function(){
     
     
                    console.log('click2.....');
                },
                func2: function(a){
     
     
                    alert(a+1)
                },
                submit: function(){
     
     
                    console.log(this.sss)
                }
                

            },


            beforeCreate: function(){
     
     
                console.log('实例初始化之前运行')
            },

            created:function(){
     
     
                console.log('实例初始化之后运行')
            },

            beforeMount: function(){
     
     
                console.log('挂载开始之前调用')
            },

            mounted: function(){
     
     
                console.log('挂载之后调用')
            },
            beforeUpdate: function(){
     
     
                console.log('数据更新之前运行')
            },

            updated:function(){
     
     
                console.log('数据更新之后运行')
            },



        })


        // 监听变量
        app.$watch('message', function(newVal, oldVal){
     
     
            console.log(newVal, oldVal);
        })

        app.$data.a = '挂载'       

        // 修改变量
        app.$data.message = 3




    </script>
    <style>
        .active{
     
     background: #FF0000;}
    </style>
 
</body>

2.2 组件定义

<body>

    <div id="app">
        <!-- 两个组建数据互不影响，表明组建可复用 -->
        <button-counter @clicknow="clicknow"></button-counter>
        <button-counter></button-counter>
        <test></test>
    </div>
    
    <script type="text/javascript">

        // 全局注册
        // 创建组件，数据和模板内容
        Vue.component('button-counter', {
    
    
            data: function(){
    
    
                return {
    
    
                    count: 0,
                }
            },
            // 一个组件模板必须具有一个跟节点
            // template: '<div><h1>这是测试组建</h1><button v-on:click="count++">You click me {
    
    { count }} times.</button></div>',
            template: '<div><h1>这是测试组建</h1><button v-on:click="func001">You click me {
    
    { count }} times.</button></div>',
            methods: {
    
    
                func001: function(){
    
    
                    this.count ++;
                    this.$emit('clicknow', this.count)
                }
            }
        })


        var vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
            },
            methods: {
    
    
                clicknow: function(e){
    
    
                    console.log(e);
                }

            },

            // 局部注册
            components: {
    
    
                test:{
    
    
                    template: '<h3>h3...</h3>'
                }
            }
        });
    </script>
    
</body>

文章目录

1. vuejs简介

1.1 vue简介

1.2 环境配置

1.3 vue.js文件引用

2. vue.js使用代码

2.1 初级使用

2.2 组件定义

猜你喜欢