Vue学习笔记-day01

全栈程序员站长

发布于 2022-06-30 11:07:21

6970

发布于 2022-06-30 11:07:21

文章被收录于专栏：全栈程序员必看

Vue笔记

vue官网：cn.vuejs.org

day01

1.(掌握)vue安装和初步体验vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

/*
    // 需要编译器
    new Vue({
   
    template: '<div>{
   { hi }}</div>'
    })

    // 不需要编译器
    new Vue({
   
    render (h) {
   
        return h('div', this.hi)
    }
    })

*/
ES6中: let (定义变量) / const(定义常量)

<div id="app">
    <button @click="add()">添加</button>
    插值表达式: {
   {
   num}}
    双向绑定:v-model
    <input type="text" v-model="msg"/>
</div>

new Vue({
   
    el:"#app",
    data:{
   
        num:0  ,
        msg:"hello vue"
    },
    methods:{
   
        add(){
   
            this.num ++;
        }
    }
});

vue 渲染式框架，数据和视图进行分离.MVVM模式

<!-- vue体验：计数器-->
<body>
		<div id="app">
			
			<input type="text" v-model="msg"/>
			{
  {msg}}
			<br/><hr color="red"/>
			
			当前技术:{
  {num}}
			<button @click="add()">+</button>
			
			<button @click="subtraction()">-</button>
		
		</div>
		<script> new Vue({
     el:"#app", data:{
     msg:"hello vue" ,num:0 }, methods:{
     add(){
     this.num++; }, subtraction(){
     this.num--; } } }) </script>
	</body>

2.(理解)vue的options选项

参考官方API文档:https://cn.vuejs.org/v2/api/#el

<body>
		<div id="app">
			
			<input type="text" v-model="msg"/>
			{
  {msg}}
			<br/><hr color="red"/>
			
			当前技术:{
  {num}}
			<button @click="add()">+</button>
			
			<button @click="subtraction()">-</button>
		
		</div>
		<script> new Vue({
     el:"#app", data:{
     msg:"hello vue" ,num:0 }, methods:{
     add(){
     this.num++; }, subtraction(){
     this.num--; } } }) </script>
	</body>

el、data、methods 表示vue的options。其他的选项参考官方api学习文档

3.(了解)vue生命周期

生命周期:created 页面加载的时候调用，但是没有渲染DOM节点.mounted 页面加载的时候调用。这个时候DOM已经渲染完了。

4.(掌握)Vue-指令

4.1 插值表达式

mustache语法就是双大括号{ {msg}},即插值语法;插值表达式里面做一些简单的运算.复杂的运算使用computed计算属性.

<body>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="app">
			 {
  {age>18?"成年":"未成年"}}
			 <hr color="red"/>
			 {
  {msg.split("-")}}	
		</div>
		<script> new Vue({
     el:"#app", data:{
     age:23, msg:"hello-vue" }, methods:{
     } }) </script>
	</body>

效果：

需要注意：在插值表达式中不能写js语句。比如{ {var a = 10 }}

4.2 v-once指令

只渲染元素和组件一次;不需要表达式, 直接将指令写在开始标签中即可

<body>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="app">
			<button @click="change()">改变msg内容</button>
			{
  {msg}}
			<hr color="red"/>
			<p v-once>{
  {msg}}</p>
		
		</div>
		<script> new Vue({
     el:"#app", data:{
     msg:"hello-vue", num:1 }, methods:{
     change(){
     this.num++; this.msg="hello-vue 的v-once指令"+(this.num); } } }) </script>
	</body>

效果：

4.3 v-html 和v-text指令

渲染文本里面的内容。但是需要注意v-html可以渲染内容里面的js代码，容易造成XSS脚本共计.

<div id="app">
    {
  {url}}
    <hr/>
    <h1 v-html="url"></h1>
</div>

<script> new Vue({
     el:"#app", data:{
     url:"<a href='http://www.baidu.com'>百度</a>" } }) </script>

4.4 v-pre指令

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。跳过大量没有指令的节点会加快编译。

<span v-pre>{
  { this will not be compiled }}</span>

就会直接显示{ {this whill not be compiled}}

4.5 v-cloak

防止{ {}}进行解析闪动。cloak 中文意思表示斗篷.

<style> [v-cloak] {
     display: none; } </style>

<div v-cloak>
  {
  { message }}
</div>

4.6 v-bind 指令`*****`

v-bind 绑定标签的属性。是标签的属性。可以是绑定 class、style 等都可以;

v-bind 可以简写为冒号”:”

1 .绑定基本属性

<div id="app">
	<img :src="url" />    
</div>

<script> new Vue({
     el:"#app", data:{
     url:"http://192.168.0.150/fasfasdfafsd.png" } }) </script>

2.绑定class对象语法

对象语法

:class=“{类名:布尔值}” ,有布尔值觉得是否绑定类名.布尔值的数据来源data。

所谓对象语法就是说 :class=“{}”,在json中使用{}表示对象的。

<style> .ative{
     color:red; } </style>
<div id="app">
<p :class="{active:isactive}">
    hello vue
    </p>
    
</div>
<script> new Vue({
     el:"#app", data:{
     isactive:true } }) </script>

3.绑定style

绑定style的对象语法:

：style = “{key(属性名,样式的名字):value(属性值)”

 <div id="app">
        <div v-bind:style="{
      color: redColor, fontSize: font18}">
            文本内容
        </div>
    </div>
    <script src="./vue.js"></script>
    <script> var vm = new Vue({
     el: '#app', data: {
     redColor: 'red', font18: '18px' } }); </script>

xxxx color 这里没有加单引号， value的值使用单引号。在vue中key可以不用加单引号，但是value如果不加单引号，vue会把他当着是一个变量来处理.如果加上单引号转成样式的时候是没有单引号的。 .titil{ font-size:50px, color:red; }

4.7 v-for指令[循环指令]

循环指令.

遍历数组.

<div id="app">
    <ul>
        <li v-for="(item,index) in boos">
        	{
  {index}}------{
  {item}}
        </li>
    </ul>
</div>
<script> new Vue({
     el:"#app", data:{
     boos:["Java","C#","python"] } }) </script>

遍历对象。

<div id="app">
    
    
</div>
<script> new Vue({
     el:"#app", data:{
     } }) </script>

5.（掌握）计算属性

计算属性：computed，计算属性作为vue实例选项options之一。

<div id="app">
    <h2>
        {
  {fullName}}
    </h2>
</div>
<style> new Vue({
     el:'#app', data:{
     firstName:"hello", lastName:'vuejs' }, computed:{
     fullName(){
     return this.firstName+' '+this.lastName; } } }) </style>

插值表达式里面还可以写方法

<div id='app'>
    {
   {getFullName()}}
</div>

<script> new Vue({
      el:"#app", methods:{
      getFullName(){
      return "hello"+" "+"vuejs"; } } }) </script>

计算属性里面的方法必须要有返回值

<div id='app'>
    
</div>
<script> new Vue({
     el:'#app', }) </script>

ES6语法之循环

<div id='app'>
    {
   {totalPrice}}
</div>
<script> new Vue({
      el:'#app', data:{
      books:[ {
     id:110,name:"unix编程艺术",price:119}, {
     id:111,name:"代码大全",price:105}, {
     id:112,name:"深入理解计算机原理",price:98} ] }, computed:{
      totalPrice(){
      let totalprice=0; for(let i in this.books){
      totalprice +=this.books[i].price } return totalprice; } } }) /* //循环方式一： for(let i in this.books){ this.books[i] } //循环方式二： for(let book of this.books){ //book表示里面的一个对象 } */ </script>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/100735.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年7月1，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度