初始Vue

最新推荐文章于 2024-07-08 10:04:44 发布

KiCCZha

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量321

点赞数 6

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/KiCCZha/article/details/136560571

版权

1.介绍

Vue是一套用来动态构建用户界面的渐进式Javascript框架。

构建用户界面：把数据通过某种办法变成用户界面。
渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件。

2.Vue的特点

遵循MVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，可以引入其他第三方库开发项目
采用组件化模式，提高代码复用率，且让代码更好维护

3.初始Vue

前置工作，给浏览器安装Vue Devtools插件
标签引入Vue包
（可选）阻止Vue在启动时生成提示Vue.config.productionTip =false
favicon需要将页标签放在项目根路径，重新打开就有了。

初始Vue

想让Vue工作，就必须创造一个Vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为Vue模板
Vue实例与容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{XXX}}中的xxx要写JS表达式，且xxx可以自动读取到data中的所有属性

注意区分：js表达式和js代码（语句）

a.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

a a+b demo(1)

b. js代码

if（）{} for（）{}

7.一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>初始vue</title>
        引入vue
        <script type="text/Javascript" src="./vue.js"></script>
	</head>
	<body>
      准备好一个容器
        <div id="demo">
        <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
        </div>
        <script type="text/Javascript">
        Vue.config.productionTip=false  //阻止vue启动生成提示
         //创建Vue实例
            new Vue（{
            el：‘#demo’，//el用于指定当前Vue实例那个容器服务，值通常为css选择器字符串
            data：{    ，//data中用于存储数据，数据供el指定的容器去使用，值暂时先写成一个对象
                name：‘cess’，
                adderss：‘成都’
            }
            }）
        </script>
	</body>
</html>

4.Vue模板语法插值语法

Vue模板语法包含两大类

1.插值语法

功能：用于解析标签体内容

写法：{{xxx}}，xxx是js表达式，可以直接读取到data中的所有区域

2.指令语法

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件。。。）

举例：<a v-bind:href:href="xxx">或简写为<a :href=”xxx“>,xxx同样要写js表达式，可以直接读取到data中的所有属性

备注：Vue中有很多指令，且形式都是v-xxx，此处只拿v-bind做举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta >
		<title>Document</title>
	</head>
	<body>
		<!-- 容器，app容器名称 -->
		<!-- 注意，容器名称尽量使用id绑定唯一值 -->
		<div id="app">
			<!-- {{}}插值语法 -->
			{{ message }}
			<!-- v-on:事件==@事件
			注：事件名称一定不要加on -->
			<button v-on:click="func1()">点击1</button>
			<button @click="func2()">点击2</button>
			<h1>我现在点击的时{{num}}</h1>
		</div>
	</body>
	<script src="./vue.js"></script>
	<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
	<script>
		// 阻止VUE在启动时产生的提示
		Vue.config.productionTip=false;
		var app = new Vue({
			el: '#app',
			data() {
				return {
					uesrName:"李四",
					message: 'Hello Vue!',
				  	b: '嗡嗡嗡' ,
					C:'',
					num:"1234"
				}
			},
			
			// methods处理函数的方式
			methods:{
				func1(){
					console.log(11111111);
					return 1111111;
				},
				func2(){
					console.log(11111111);
					return 2222221;
				}
			}
		})
		// vm.$mount("#ips");
		// 绑定容器的2种方法
		// 1.el绑定：“容器id或class等”
		// 2.Vue实例.$mount("容器id或")
	</script>
</html>

5.Vue中数据绑定

Vue中有两种数据绑定方式

a. 单向绑定 v-bind 数据只能从data流向页面

b.双向绑定 v-model数据不仅能从data流向页面，还可以从页面流向data

备注

a.双向绑定一般都应用在表单类元素上，如<input> <select> <textarea>等

b.v-model:value可以简写v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
        /* v-cloak 解决网速慢展示插值|页面出现闪烁或白屏，
        使用需要给标签添加v-cloak,还需要添加上面代码*/
    </style>
</head>
<body>
    <div id="app" style="height: 2000px;">
        <h1 v-cloak>{{x}}</h1>
        <div v-for="(item,index) of arr" :key="index+item">{{item}}</div>
        <div v-for="(item,index) of obj" :key="index+item">{{item}}</div>
        <div v-for="(item,index) of arrays" :key="index+item+a">
            <!-- {{item}} -->
            <div v-if="Array.isArray(item)">
                <h1 v-for="(items,index) of item" :key="index+items">
                    {{items}}
                </h1>
            </div>
            <h1 v-else style="color:red">
                {{item}}
            </h1>
        </div>
        <!-- v-if判断|显示隐藏 -->
        <h1 v-if="b">11111</h1>
        <h1 v-if="c">22222</h1>
        <!-- v-if和v-show区别
        1.相同的：都可以进行显示隐藏
        2.不同点：v-if存在或不存在，v-show展示或不展示
        3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗
        多次的显示隐藏推荐使用v-show
         -->
         <!-- v-if和v-for优先级和使用事项
        在vue2中v-for比v-if优先级高
        在vue3中v-if比v-for优先级高
        v-if和v-for在vue2或vue3中都不要同时使用，
        如果需要使用在外层先使用判断，在进行循环 -->
        <h1 v-show="d">33333</h1>
        <h1 v-show="e">44444</h1>
        <h1 v-show="arr.length>0">555555</h1>
        
        <!-- v-else，v-else-if -->
        <!-- 注：v-else，v-else-if不能单独使用，要跟if一起使用 -->
        <h2 v-if="x==1">我是测试文本111</h2>
        <h2 v-else-if="x==2">我是测试文本222</h2>
        <h2 v-else>我是测试文本333</h2>
        <!-- v-else,v-cloak,v-once，v-pre不需要带值 -->
        <!-- v-bind:或:,v-on:或@,v-for,v-if,v-show,v-model
        v-else,v-else-if,v-text,v-html,v-cloak,v-once,v-pre, -->
        <!-- v-text和v-html，插值 区别 -->
        <!-- 1.相同点：v-text和v-html都会覆盖原本内容
        不同点：v-text文本，v-html标签
        插值会进行拼接 
        注：一定不要在用户提交时使用v-html-->
        <div v-text="txt">aaaaaaaa</div>
        <div v-html="txt">bbbbbbbb</div>
        <hr>
        <!-- v-once只加载一次，静态内容，因为不会修改值所以优化了性能 -->
        <button @click="func3()">点击</button>
        <h1 v-once>{{num}}</h1>
        <h1>{{num}}</h1>
        <!-- v-pre可以跳过插值或指令不加载 -->
        <h1 v-pre v-show="b">{{num}}</h1>
        
        <!-- v-bind:单向数据绑定,由data流行页面 -->
        <!-- v-model双向数据绑定，由data流向页面或页面(用户输入)流向data -->
        <input type="text" :value="nums">
        <input type="text" v-model="nums">
        <button @click="func5()">点击</button>
        <hr>
        <table border="1" width="100%" cellspacing="0">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </table>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                arrsss:[
                    {
                        userName:"张三",
                        age:18,
                        sex:"男"
                    },
                    {
                        userName:"李四",
                        age:20,
                        sex:"女"
                    },
                ],
                nums:"我是测试文本",
                txt:"<h1>我是h1标签</h1>",
                x:"kjdsajkashdjkshdjkash ",
                b:false,
                c:true,
                d:false,
                e:true,
                a:"a",
                arr:[11,22,33,44],
                obj:{
                    id:202201,
                    name:"zs",
                    age:"男"
                },
                arrs:[11,[22,33],44,[55,66,77],88],
                arrays:["第一个",["第二个","第三个","第四个"],"第五个",["第六个","第七个"],"第八个"],
                num:0
                
            }
        },
        methods: {
            func3(){
                this.num++;
            },
            func5(){
                console.log(this.nums);
            }
        },
    })
</script>
</html>

KiCCZha

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
初始Vue

举例：<a v-bind:href:href="xxx">或简写为<a :href=”xxx“>,xxx同样要写。b.v-model:value可以简写v-model，因为v-model默认收集的就是value值。b.双向绑定 v-model数据不仅能从data流向页面，还可以从页面流向data。7.一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新。备注：Vue中有很多指令，且形式都是v-xxx，此处只拿v-bind做举例。功能：用于解析标签（包括：标签属性，标签体内容，绑定事件。
复制链接

扫一扫