Vue的简单学习入门

1Vue框架的引入

创建一个web工程，在一个html中引入vue的文件。

<script src="vuejs/vue.js"></script>

2Vue简单的demo

<div id="app">
        {{message}},======={{say()}}
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello",
            user:{
                username:"张三",
                age:18
            }
        },
        methods:{
            say(){
                return this.user.age;
            }
        }
    })

</script>

3Vue常用表达式（加减乘除）

   <div id="app">
        <!--普通的加减乘除-->
        {{3+5}}<!-- 8 -->
        {{3-5}}<!-- -2 -->
        {{3*5}}<!-- 15 -->
        {{3/5}}<!-- 0.6 -->
        {{3+num}}<!-- 如果被加的元素是字符串，就是拼接字符串 -->
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            num:"15"

        }
    })

</script>

4Vue常见指令

     <div id="app">
            <!--v-model-->
            <input type="text" v-model="message" value="你好"/>{{message}}
            <!--v-text-->
            <div v-text="message2">
                {{message2}}
            </div>
            <!--v-html-->
            <!--v-text和v-html的区别是后者可以解析属性值中的html标签-->
            <div v-html="message3">
                {{message3}}
            </div>
        </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"你好",
                message2:"nijojoo",
                message3:"<h1>吃的什么？</h1>"
            }
        })
    </script>

5Vue常见重要指令（个人认为）

5.1v-for

<div id="app">
        <!--
            遍历对象
            v:属性值；k：属性名；i：索引，类似数组
        -->
        <ul>
            <li v-for="(v,k,i) in user">{{i}}+{{k}}+{{v}}
            </li>
        </ul>
        <!--
             遍历数组
              v代表遍历的值，i代表数组下标
        -->
        <ul>
            <li v-for="(v,i) in hobbys">{{i}}+{{v}}
            </li>
        </ul>
        <!--
            遍历字符串
        -->
        <ul>
            <li v-for="(v,i) in str">{{i}}+{{v}}
            </li>
        </ul>
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{
                name:"张三",
                age:18,
                hobbys:"看书"
            },
            hobbys:["看书","跳舞","写代码"],
            str:"烟笼寒水"

        }
    })
</script>

5.2v-for案例,创建简单的表格

    <div id="app">
        <table>
            <tr>
                <!--表头-->
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
                <th>部门</th>
            </tr>
            <tr v-for="v in user">
                <td>{{v.id}}</td>
                <td>{{v.name}}</td>
                <td>{{v.age}}</td>
                <td>{{v.hobby}}</td>
                <td>{{v.department.deptname?v.department.deptname:""}}</td>
            </tr>
        </table>
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            user:[
                {id:1,name:"张三",hobby:"唱歌",age:20,department:{deptname:"采购部"}},
                {id:2,name:"李四",hobby:"唱歌",age:33,department:{deptname:"采购部"}},
                {id:3,name:"王五",hobby:"唱歌",age:19,department:{deptname:"采购部"}},
            ]
        }
    })
</script>

5.3v-bind指令的使用

<div id="app">
        <!--v-bind的几种写法-->
        <img v-bind:src="src" v-bind:width="width" alt=""/>
        <img :src="src" :width="width" alt=""/>
        <img v-bind="img"/>
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            src:"img/1.png",
            width:250,
            img:{
                src:"img/1.png",
                width:250
            }
        }
    })
</script>

5.4v-model指令

<div id="app">
        <input type="text" v-model="inputVal" /> {{inputVal}}
        <hr />
        性别:
        <input name="sex" v-model="sexVal" value="true" type="radio" /> 男
        <input name="sex" v-model="sexVal" value="false" type="radio" /> 女
        {{sexVal}}
        <hr />
        爱好:
        <input name="hobby" v-model="hobbyVal" value="1" type="checkbox" /> 打篮球
        <input name="hobby" v-model="hobbyVal" value="2" type="checkbox" /> 写代码
        <input name="hobby" v-model="hobbyVal" value="3" type="checkbox" /> 找bug
        <input name="hobby" v-model="hobbyVal" value="4" type="checkbox" /> 看别人写代码
        {{hobbyVal}}
        <hr />
        国家:
        <select v-model="selectVal">
            <option value="china">中国</option>
            <option value="jpan">日本</option>
            <option value="usa">美国</option>
            <option value="fei">南非</option>
        </select>
        {{selectVal}}
        <hr />
        <textarea v-model="textareaVal"></textarea> {{textareaVal}}
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                inputVal:"真的太强了",
                sexVal:false,
                hobbyVal:[1,4],
                selectVal:"fei",
                textareaVal:"我是一个中国人"
            }
        })
    </script>

6vue自定义组件

注意事项：

1：需要先定义组件，然后再进行挂载

2：template中必须要有一个根标签，否则解析错误

<div id="app">
    <mycom></mycom>
    <mycom1></mycom1>
</div>

<div id="app1">
    <mycom></mycom>
</div>
<script>
    // 全局组件
    Vue.component("mycom",{
       template:"<h1>哈哈哈</h1>"
    });
    new Vue({
        el:"#app",
        data:{},
        //局部组件
        components:{
            mycom1:{
                template:"<h1>你看的见我吗？？</h1>"
            }
        }
    });
    new Vue({
        el:"#app1",
        data:{}
    })
</script>

转载于:https://my.oschina.net/u/4107793/blog/3030954